在引导选项卡单击时暂停 Youtube 视频

Question

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

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在一个光滑的滑块中播放视频，并包装在引导选项卡内容中

如果有人能帮我解决它，我将非常有义务。

提前谢谢。

Answer 1

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