CMS Filter Affecting My Video Element

Description

Hi there,

I’m using the V2 Filter and I have a videos on my page using the custom element. Here is the code that gets them to pause and have sound on click.

However, when I click on the filters the second and third time, the video stops behaving as usual. They still work and play/pause on click but they don’t loop automatically like on page load?

I’m under an NDA so I can’t share a read-only publicly, but didn’t know who to DM and was hoping someone might have an answer in the forum first

<script>
$(".my-video").each(function () {
  const $wrap        = $(this);                     // .my-video wrapper
  const $video       = $wrap.find(".my-video_video");
  const $playBtn     = $wrap.find(".my-video_play-btn");
  const $closeBtn    = $wrap.find(".my-video_close-btn");
  const  videoEl     = $video.get(0);

  // --- factor the “shrink & reset” work into one reusable function ----------
  function shrinkAndLoop () {
    $wrap.addClass("shrink");
    $video.prop({ muted: true, loop: true });
    videoEl.currentTime = 0;
    videoEl.play();                   // keep it running silently in a loop
    $playBtn.removeClass("is-playing");
    $closeBtn.removeClass("is-playing");
  }

  // 1) when the video naturally ends
  $video.on("ended", shrinkAndLoop);

  // 2) when the whole .my-video element scrolls out of view
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (!entry.isIntersecting && !$wrap.hasClass("shrink")) {
        shrinkAndLoop();
      }
    });
  }, { threshold: 0 });               // callback fires once the element is 0 px in view

  observer.observe($wrap[0]);

  // 3) manual toggle on click (unchanged behaviour)
  $wrap.on("click", function () {
    $wrap.toggleClass("shrink");

    if ($wrap.hasClass("shrink")) {
      // silent looping “thumbnail” mode
      $video.prop({ muted: true, loop: true });
      $playBtn.removeClass("is-playing");
      $closeBtn.removeClass("is-playing");
    } else {
      // full-screen playback mode
      $video.prop({ muted: false, loop: false });
      videoEl.currentTime = 0;
      videoEl.play();
      $playBtn.addClass("is-playing");
      $closeBtn.addClass("is-playing");
    }
  });
});
</script>

Site URL

NDA

Steps to Reproduce

  1. [First step]
  2. [Second step]
  3. [Third step]

Expected Behavior

The videos to keep looping regardless of playing with audio as normal

Actual Behavior

The videos play with on click as normal and go muted on second click, but didn’t start looping once I interact with the cms filters

Video/Screenshots

NDA

Additional Context

NDA Notice: If you’re under an NDA, please feel free to send us a Direct Message/Email with the above information.

Hi @lovebrian649!
You can send the Webflow read-only to me, my DMs are open!

Hi @Support-Pedro

Sorry for the delayed response…I was actually able to find a workaround using tabs instead of a filter

1 Like