BXSlider Pause Youtube Video When Switching Slides

Question

I have the following example of BXSlider, where I have 4 slides each having a Youtube video. The problem is that when I play a video and go to the next slide, it keeps on playing:

http://jsfiddle.net/isherwood/XWL9Y/

$(document).ready(function () {
$('.bxslider').bxSlider();
});

Can someone help out to make the youtube video pause when going to the next slide?

score 3 · Answer 1 · edited May 23 '17 at 11:53

var slider = $("#gallery").bxSlider({
    adaptiveHeight:true,
    auto:true, 
    autoStart:true, 
    autoControls:true, 
    video:true,
    onSlideAfter: function(slide){
       if (slide.find("iframe:first").length) {
           slider.stopAuto();
       }
    }
});

You might also be able to use something like slide.find("div.fluid-width-video-wrapper:first") if you use iframes for other things in the in the slider.

Source

----Update----

var slider = $('.bxslider').bxSlider({
  onSlideAfter: function(slide, oldindex, currentSlide){
    oldSlide = $( '.bxslider > li:nth-child(' + (oldindex+1) + ')');
      youtubeVideo = oldSlide.find('iframe[src*=youtube]');
      if ( youtubeVideo.length ) {
        youtubeVideo.get(0).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}','*');
      }
  }
});

Source

----Edit----

Also make sure to add ?enablejsapi=true to the the iframe src, otherwise the above JavaScript will not work (source).

score 0 · Answer 2 · answered May 03 '19 at 06:57

After long search i found the solution. Try this:

onSlideAfter: function(){
    jQuery("iframe").each(function() { 
        var src= jQuery(this).attr('src');
        jQuery(this).attr('src',src);  
    });
}

This will stop all videos. It is basically resetting the video urls.

BXSlider Pause Youtube Video When Switching Slides

2 Answers2