CODEWITHSUNDEEP
javascriptjqueryjquery-pluginsyoutubebxslider
Jab018
Jab018

Reputation: 41

BXSlider Pause Youtube Video When Switching Slides

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?

Upvotes: 3

Views: 7493

Answers (2)

Maha Dev
Maha Dev

Reputation: 3965

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.

Upvotes: 0

Vibhor Dube
Vibhor Dube

Reputation: 5071

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).

Upvotes: 3

Related Questions