Pause HTML5 video in slider (flickity)

Question

I'm currently adding some slides into a slider (using flickity) and for some reason I can get the first video to pause when there is an event change when the slider is moved to the next slide. But if I play the next video in the next slide, and then move back to the previous or next slide, the video will not pause.

Here's what I'm doing so far:

var testimonials = $('.case-studies__testimonial-group');
testimonials.on( 'select.flickity', function( event, index ) {
      $(".testimonial-item .content-vid").get(0).pause();
});

Strange that it would work on the first one when there is an event change, but not on the second one. I feel that is has something to with fact that the first video is already paused that is not pausing the second video on the slider change? Not sure if there is something else I should be looking for.

Answer 1

Ok, so after messing with it some more, it appears that this works:

var testimonials = $('.case-studies__testimonial-group');
testimonials.on( 'select.flickity', function( event, index ) {
      $  $('.testimonial-item').find('video').each(function() {
            this.pause();
        });
});

Basically, when it starts the event change within flickity, that will find the video and pause it outright. Which is fine if it pauses ALL the videos since that's the intended purpose anyways.

rubberduck -> FTW