当点击外部弹出窗口时，Jquery 使 Youtube 视频停止播放答案

【问题标题】：Jquery make Youtube video stop playing when clicking outside popup当点击外部弹出窗口时，Jquery 使 Youtube 视频停止播放
【发布时间】：2014-05-19 18:37:30
【问题描述】：

我有这个 Jquery 弹出窗口，我在其中存储了一个带有 youtube 视频的 iframe。当我单击链接时，弹出窗口打开，用户可以单击视频并播放它。即使，当我在弹出窗口之外单击时，弹出窗口关闭，但视频/声音继续播放！我怎样才能避免这种情况？

这是我的 HTML

<a href="#" id="showPopup">CLICK</a>

<div class="bg" style="display:none"></div>

<div class="popup" style="display:none">
  <iframe width="480" height="360" src="//www.youtube.com/embed/Q_WHGV5bejk" frameborder="0" allowfullscreen></iframe>
</div>

我的 JS：

$(function(){
$("#showPopup").click(function(e){
    e.stopPropagation();
    $(".bg").toggle();
    $(".popup").toggle();
});
$("body").click(function(){
    $(".bg").toggle();
    $(".popup").hide();
});
});

还有 CSS：

.popup{
background-color:#E6E9F2;
position:absolute;
min-height:auto;
width:auto;
border: solid 2px #B9EAF0;
z-index: 1002;
}

.bg {
 background-color:#111;
 opacity: 0.65;
 position:absolute;
 z-index: 1000;
 top:0px;
 left:0px;
 width:100%;
 min-height:100%;
 overflow:auto;
}

我还创建了一个 Fiddle http://jsfiddle.net/nLBZa/6/

那么，有人有什么建议吗？

提前谢谢...

【问题讨论】：

标签： javascript jquery html css youtube

【解决方案1】：

尝试将以下内容添加到您的 Jquery 中

$('#playerID').get(0).stopVideo();

编辑： 好的，所以我认为无论如何都可以根据 API 工作......这是另一个解决方案：

var video = $("#player").attr("src");
$("#player").attr("src","");
$("#player").attr("src",video);

您的fiddle 已更新。

【讨论】：

刚刚添加了另一个可能的解决方案，你可以给它一个 bash。
好的，谢谢！！！我发现另一个 stackoverflow 问题与您给出的答案相同！再次感谢！
太棒了.. 祝你好运 :)

【解决方案2】：

假设，我在纯 CSS 模式中嵌入了几个不同的 YT 视频，如下所示：

<div id="video1" class="modalDialog">
<div>
    <a href="#close" title="Close" class="videoclose">X</a>
    <div id="video1_content"><iframe width="420" class="yvideo" id="video1_iframe" height="315" src="https://www.youtube.com/embed/_Qc4V_vEXdY?rel=0&amp;showinfo=0&amp;enablejsapi=1" frameborder="0" allowfullscreen></iframe></div>
</div>

我可以像这样动态卸载（并因此停止播放）单个视频：

$('.videoclose').click(function( e ){
      var contentdiv = $(this).next('div');
      var iframe = $(contentdiv).find('iframe:first');
      var video = $(iframe).attr("src");
      $(iframe).attr("src","");
      $(iframe).attr("src",video);
});

感谢迈克的点火；-)

【讨论】：