Question

我有这个Jquery弹出窗口，我用iftube视频存储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;
}

我已经创建了一个小提琴http://jsfiddle.net/nLBZa/6/

那么，有人有建议吗？

提前感谢...

Answer 1

尝试将以下内容添加到Jquery

中

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

修改好的，所以我认为根据API会有效，无论如何......这是另一个解决方案：

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

和您的fiddle已更新。

Answer 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);
});

感谢迈克的点火; - ）

单击外部弹出窗口时，Jquery使Youtube视频停止播放

2 个答案: