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

How To
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!