CODEWITHSUNDEEP
javascriptjqueryhtmlvideoslide
patie
patie

Reputation: 308

Pause video on slider

I am creating a slider with images that when someone clicks one slide, opens a modal window with another slider with videos.

At the moment, when you click one of the images, it opens a video that auto plays. The problem is that if you click to see the next slide, the video keeps playing.

So I would like to pause the video when the slide moves...

Here is a fiddle

Upvotes: 1

Views: 2791

Answers (2)

patie
patie

Reputation: 308

I found the solution, thanks to @lonut who pointed me in the right direction:

var iframe = $('.vimeo-player')[0];
var player = $f(iframe);

$('.carousel-control').bind('click', function() {
    player.api('pause');
});

Upvotes: 0

Ionut Necula
Ionut Necula

Reputation: 11462

You can pause the video using pause() method when going to next slide using: 

$('.center').on('afterChange', function(event, slick, currentSlide, nextSlide) {
  player.pause();
});

I declared the player variable globally outside the click event to be able to use pause() on it.

Please see the working updated FIDDLE.

Upvotes: 1

Related Questions