在引导选项卡上暂停 Youtube 视频点击答案

【问题标题】：Pause Youtube video on bootstrap tab click在引导选项卡上暂停 Youtube 视频点击
【发布时间】：2017-01-31 13:53:30
【问题描述】：

我在 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 在slick slider 中播放视频并包裹在引导选项卡内容中

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

提前致谢。

【问题讨论】：

您的stopIframeonTabClick 每次执行时都会添加新的click 事件。点击事件堆叠，不互相替换。

标签： jquery twitter-bootstrap-3 youtube-api video.js

【解决方案1】：

经过长时间的研发，我做到了。我误认为在活动选项卡内容和活动光滑滑块中拾取实际 iframe。我需要拥有实际的window DOM。感谢 answer 中的 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();
});

【讨论】：