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
- [First step]
- [Second step]
- [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.