Question

我正在使用colorbox在网页加载时弹出视频。我正在使用带有colorbox模式的内联html选项，我在模态框中有一个iframe youtube视频。当我关闭视频时，音频停止，然后再次加载并开始播放。当我关闭模态框时，我希望音频不再开始播放。

这是我的脚本，在页面加载时打开模态：

<script>
      jQuery(document).ready(function() {
         jQuery.colorbox({width:"602px", height:"460px", inline:true, href:"#video_popup"})
      });
</script>

以下是实际内联内容：

<div style="display:none;">
  <div id="video_popup">
    <iframe width="560" height="315" src="http://www.youtube.com/embed/6A8W77m-ZTw?&amp;autoplay=1&controls=0" frameborder="0" allowfullscreen></iframe>
    <button></button>
  </div>
</div>

Answer 1

如果您想显示iframe内容（嵌入式YouTube），请删除html代码并尝试以下操作：

jQuery(document).ready(function() {
     jQuery.colorbox({innerWidth:602, innerHeight:460, iframe:true, href:"http://www.youtube.com/embed/6A8W77m-ZTw?&amp;autoplay=1&controls=0"})
  });

如果您想以内联格式显示iframe内容（出于某种原因）：

用户关闭模式框后，内联元素将附加到原始父元素。因此，iframe将再次加载，即使视频不可见，视频也会播放。（因为你设置了youtube嵌入式url para autoplay = 1）。为了解决这个问题，我为cleanUp事件注册了一个处理程序，它将在关闭进程的开始时触发。在模态窗口开始关闭之前，我将iframe src url param“autoplay”更改为0。模态窗口关闭后，音频将无法播放。

试试这个：

jQuery(document).ready(function() {
     jQuery.colorbox({
        width:"602px", 
        height:"460px", 
        inline:true, 
        href:"#video_popup", 
        onCleanup: function(){
            $("iframe").attr("src","http://www.youtube.com/embed/6A8W77m-ZTw?&amp;autoplay=0&controls=0");
        }

});

模式框关闭后，Youtube iframe视频重新启动

1 个答案: