Slick slider pause youtube video when slide change

Question

I have created a image slider using Jquery Slick Slider, Its having youtube video clips as well. When page load youtube video is set to 1st slide of the slider and it is autoplay and starts playing. I want, when I change slider frame to next slide youtube video stops playing.

I look at other stackoverflow answers but can't find anything.

I tried this -

Here is my div structure-

<div id="mainSlider" class="box box-default">
    <div class="sliderItem"><div class="playerID"><iframe width="100%" height="100%" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/VIDEO_ID?rel=0&amp;autoplay=1&amp;version=3&amp;loop=1&amp;playlist=VIDEO_ID&amp;enablejsapi=1" id="player"></iframe></div></div>
    <div class="sliderItem"><img src="" /></div>
    <div class="sliderItem"><img src="" /></div>
    <div class="sliderItem"><img src="" /></div>
</div>

I used JS -

$("#mainSlider").slick({
         dots: true,
          autoplay: false,
          autoplaySpeed: 7000,
          speed: 500,
          pauseOnHover: true,
           responsive: [
        {
          breakpoint: 1025,
          settings: {
            arrows: true,
            dots: false
          }
        }
      ]
    })
    .on('afterChange', function( e, slick, currentSlide ) {
          $('.bumper').css('display', 'block');
          playpausevideo($currentSlide.eq(e).data('youtubeplayer'), 'pause')
    });

Youtube JS -

function onYouTubeIframeAPIReady(){ // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtube/iframe_api_reference)
jQuery(function($){ // when DOM has loaded
    var $contentdivs = $('.sliderItem').find('div.playerID')
    $contentdivs.each(function(i){ // loop through the content divs
        var $contentdiv = $(this)
        var $youtubeframe = $contentdiv.find('iframe[src*="youtube.com"]:eq(0)') // find Youtube iframe within DIV, if it exists
        if ($youtubeframe.length == 1){
          var player = new YT.Player($youtubeframe.get(0), { // instantiate a new Youtube API player on each Youtube iframe (its DOM object)
            events: {
              'onReady': function(e){e.target._donecheck=true} // indicate when video has done loading
            }
          })
            $contentdiv.data("youtubeplayer", player) // store Youtube API player inside contentdiv object
        }
    })
})
}

function playpausevideo(player, action){
    if (player && player._donecheck === true){
        if (action == "play")
            player.playVideo()
        else if (action == "pause")
            player.pauseVideo()
    }
    <script src="http://www.youtube.com/iframe_api"></script>

This code is not working and youtube video does not stops, Its still playing when slide change.

Any suggestions?

Thanks

Solution 1

Adding off of Sequence's answer, this will allow the slider to function even if there is more than one slider on the page.

$('.mainSlider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
  var current = $(slick.$slides[currentSlide]);
  current.html(current.html());
});

Solution 2

Check the simplest way, Current slide iframe src reset:

$('.mainSlider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
       $('.slick-current iframe').attr('src', $('.slick-current iframe').attr('src'));
});

Solution 3

I would reset the HTML content. It will kill the IFrame and rebuild it.

var slider =  $('.mainSlider').slick({
    slidesToShow: 1,
    autoplay: false,
    autoplaySpeed: 5000
});

slider.on('beforeChange', function(event, slick, currentSlide, nextSlide){
    var current = $('.slick-current');
    current.html(current.html());
});

Comments

[Shadoath]

More robust! This is preferred for me.

[strikemike2k]

Excellent addition to use the slick variable passed through the event.