mutationObserverFullCode.js

const musicGenres = ["Reggaeton", "Pop", "Country"];

musicGenres.forEach(genre => {
  const videoHtml = `
    <video class="carousel-video" preload muted playsinline data-genre=${genre}>
      <source src=".../Muted_Video_${genre}.mp4" type="video/mp4">
    </video>
  `;
  
  // append each new video element to the carousel container
  $(".videoCarouselContainer").append(videoHtml);
});

const observer = new MutationObserver(mutationsList => {
  for (const mutation of mutationsList) {
    // save targeted element to avoid repeating `mutation.target`
    const targetedVideoElement = mutation.target;
    
    const isCurrentVideo = targetedVideoElement.getAttribute("aria-hidden") === "false";

    if (isCurrentVideo) {
      // if video is visible, play it
      targetedVideoElement.play();
      
      const currentVideoGenre = targetedVideoElement.getAttribute("data-genre");

      const popupVideoHtml = `
        <video controls>
          <source src=".../Video_${currentVideoGenre}.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      `;

      // append popup video to the modal container
      $(".ModalContainer").html(popupVideoHtml);
    } else {
      // if video is not visible, pause and reset it
      targetedVideoElement.pause();
      targetedVideoElement.currentTime = 0;
    }     
  }
});

const observerConfiguration = {
  attributes: true,
  attributeFilter: ["aria-hidden"],
};

// get all muted video elements
const videoElements = document.querySelectorAll(".carousel-video");

// observe them
videoElements.forEach(videoElement => {
  observer.observe(videoElement, observerConfiguration);
});