1

我正在使用颜色框在网页加载时弹出视频。我正在使用带有颜色框模式的内联 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>
4

1 回答 1

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 参数“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");
        }

});
于 2013-06-27T16:12:40.900 回答