play media video when viewing it

const splideVideo = document.querySelector('[data-pf-type="ProductMedia"] .splide__slide[data-media-type="video"]');
const isActive = splideVideo.classList.contains('is-active');
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.attributeName == 'class') {
            const currentClassState = mutation.target.classList.contains('is-active');
            const mediaVideo = document.querySelector('[data-pf-type="ProductMedia"] video');
            if (isActive !== currentClassState) {
                mediaVideo.setAttribute('playsinline', '');
                mediaVideo.muted = true;
                mediaVideo.play();
            } else {
                mediaVideo.pause();
            }
        }
    });
});
observer.observe(splideVideo, { attributes: true });