SOLVED: Autopause a playing video in a nestable slider when moving to a different slide

How To
1

Hello everyone!
After spending hours trying to make this work have ended up asking for help on the forum for the first time.

All I need is that, when having a Nestable Slider that contains a video, if you are playing that video and change to a different slide it’s paused automatically. This way you don’t have the sound playing in the background from a video is not visible.

The SplideJS library Bricks uses includes this feature inside its video extension, as you can read it says “controls play/pause when the carousel moves”. I assume Bricks includes this video extension but the autopause/autoplay when moving the carousel is not working and there’s no option to activate it. I have been trying to get a script that makes it possible but after many attempts I didn’t succeed.

This is the page where I need this to work. On the second slide of every slider there’s a video.

I think the closer I got was the next script, but still didn’t work:

<script>
// Get the Splide instance
const splideId = window.bricksData.splideInstances['project-slider'];

// Add event listener for when the slide is changed
splideInstance.on('moved', function(newIndex) {
    // Get the current slide element
    var currentSlide = splideInstance.Components.Elements.slides[newIndex];

    // Find the video element inside the current slide
    var videoElement = currentSlide.querySelector('video');

    // Pause the video if it's playing
    if (videoElement && !videoElement.paused) {
        videoElement.pause();
    }
});

</script>

Can someone please help me with this?
Thank you in advance!

2

I’ve just found a solution on this Reddit thread.

The approach is different and could work on virtually any slider that has a similar functionallity than the one used in Bricks, made using the Splide library. This script stops any video that is playing on the page when clicking/touching the prev/next arrows. If you are not using the Nestable Slider of Bricks Builder or the Splide slider make sure to change “splide__arrow” to the class of your arrows.

<script>
jQuery(document).ready(function($) {
    // Add a click event handler to the entire document
    $(document).on('click', function(event) {
        // Check if the clicked element has the class "splide__arrow"
        if ($(event.target).hasClass('splide__arrow')) {
            // Pause all videos on the page
            $('video').each(function() { if (!this.paused) {this.pause();}});
        }
    });
});
</script>

BUT, this solution only works when clicking/touching the prev/next arrow, so ON TOUCH SCREENS it won’t work if we drag the slide instead of using the arrows.

I hope this helps someone out there!