Javascript BXSlider切换幻灯片时暂停Youtube视频

我有下面的BXSlider示例，其中我有4张幻灯片，每张幻灯片都有一个Youtube视频。问题是，当我播放视频并转到下一张幻灯片时，它会继续播放：

在观看下一张幻灯片时，是否有人可以帮助暂停youtube视频

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();
       }
    }
});

如果您在滑块中的其他内容使用iframe，则还可以使用类似slide.find（“div.fluid-width-video-wrapper:first”）的内容

----更新----

----编辑----

---

还要确保向iframe src添加

？enablejsapi=true

，否则上述JavaScript将无法工作（）。

经过长时间搜索，我找到了解决方案。试试这个：

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

这将停止所有视频。它基本上是重置视频URL

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":""}','*');
      }
  }
});

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