Javascript 当FlexSlider幻灯片无法观看时，停止播放YouTube视频

我正在尝试将一些YouTube嵌入视频放入FlexSlider旋转木马/滑块。我现在面临的问题是，如果幻灯片不在视野内，就停止播放视频。当前，如果播放视频并选择新视频，则前一个视频将继续播放

预期：在幻灯片更改时，停止视频。 实际：更换幻灯片时，视频将继续播放

HTML:

我这里有一个密码笔

有没有办法做到这一点

---

谢谢你的帮助，这是通过添加一些js解决的

$(window).load(function() {  
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider',
    start: function() {
      $('#carousel li').on('click', function(e){
        stopVideos();
      });
      $('#carousel li').on('click', function(e){
        stopVideos();
      });
    }
  }); 
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
    start: function() {
      $('.flex-next').on('click', function(e){
        stopVideos();
      });
      $('.flex-prev').on('click', function(e){
        stopVideos();
      });
    }
  });
});

function stopVideos() {
  $('.iframe-vid').each(function() {
  this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
  });
}

$(window).load(function() {  
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  }); 
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

$(window).load(function() {  
  $('#carousel').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider',
    start: function() {
      $('#carousel li').on('click', function(e){
        stopVideos();
      });
      $('#carousel li').on('click', function(e){
        stopVideos();
      });
    }
  }); 
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel",
    start: function() {
      $('.flex-next').on('click', function(e){
        stopVideos();
      });
      $('.flex-prev').on('click', function(e){
        stopVideos();
      });
    }
  });
});

function stopVideos() {
  $('.iframe-vid').each(function() {
  this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
  });
}