单击 bootstrap 选项卡暂停 Youtube 视频

Question

我在 Bootstrap 标签内容中有多个 YouTube 视频。我打算暂停 Bootstrap 选项卡的单击事件。我编码的是：

function stopIframeonTabClick(){

$('.video-nav-tab a').click(function (e) {

 var selected = $(this).parent().index();

  $('.video-nav-tab a').each(function(index){

 if(index != selected){

   var iframe = $(".tab-content").children().eq(index).find('iframe');

   //console.log(iframe.attr('class'));

   var data = {"event":"command","func":"pauseVideo","args":""};
   var message = JSON.stringify(data);
   $("iframe", index)[0].contentWindow.postMessage(message, '*');

   }
    });
});
};//stopIframeonTabClick()

stopIframeonTabClick();

它不工作，我发现控制台错误：

Uncaught TypeError: Cannot read property 'contentWindow' of undefined

我确定 $("iframe", index)[0].contentWindow.postMessage(message, '*'); 索引在这里做错了，但我不知道该怎么做。

也在 IE 中检查过，由于错误视频无法播放。

基本上我使用 youtube-video.js to play the video inside a slick slider 并包裹在 bootstrap 选项卡内容中

如果有人能帮我解决这个问题，我将不胜感激。

提前致谢。

Answer 1

经过长时间的研发，我做到了。我误以为在活动 tab-contents 和活动光滑滑块中拾取了实际的 iframe。我需要的是实际的 window DOM。感谢 Jivings

我正在分享代码以供将来帮助他人：-

 $(window).load(function(){

    function stopIframeonTabClick(){

    $('.video-nav-tab a').click(function (e) {

    var selected = $(this).parent().index();

    $('.video-nav-tab a').each(function(index){

    if(index != selected){

    var iframe = $(".video-tab-content.tab-content .tab-pane.active .slick-active .video-wrapper ").find('iframe');
       var iframeID = iframe.attr('id');
      console.log(iframeID); 
       var data = {"event":"command","func":"pauseVideo","args":""};
       var message = JSON.stringify(data);
        $('#'+iframeID )[0].contentWindow.postMessage(message, '*');

          }
         });
        });
     };//stopIframeonTabClick()

 stopIframeonTabClick();
});

单击 bootstrap 选项卡暂停 Youtube 视频

Pause Youtube video on bootstrap tab click

jquery

youtube-api

video.js

twitter-bootstrap-3