Question

刚刚在页面加载时弹出Fancybox - 然而，当用户点击fancybox回到网站时，歌曲将再次开始播放。关于可能导致这种情况的任何想法？

<!-- FANCYBOX POPUP -->
<a class="popupLink" href="#popup"></a>
<div id="popup">
     <iframe width="853" height="480" src="http://www.youtube.com/embed/Qw7k_erTgow?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<!-- .popup -->

<script type="text/javascript">
$(document).ready(function() {
    $(".popupLink").fancybox();                    

     window.setTimeout('$(".popupLink").trigger("click")', 100);
});
</script>

<script type="text/javascript">
$("a.more").click(function() {
$.fancybox({
        'padding'       : 0,
        'autoScale'     : false,
        'transitionIn'  : 'none',
        'transitionOut' : 'none',
        'title'         : this.title,
        'width'         : 680,
        'height'        : 495,
        'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
        'type'          : 'swf',
        'swf'           : {
             'wmode'           : 'transparent',
            'allowfullscreen'  : 'true'
        }
    });

Answer 1

首先，为了避免潜在的冲突，你应该加载一个版本的jQuery（你有两个：v1.4和v1.7）

其次，和jQuery一样，你要加载两个不同版本的fancybox（你有：v1.3.4和v2.0.3）

第三，我个人认为为视频设置inline iframe并不是一个好主意，因为你无法控制iframe内发生的事情。此外，它可能会增加您的页面加载和其他潜在问题（例如您遇到的问题）的开销。

好消息是，您可以在fancybox内“按需”打开视频，换句话说，只有当您需要它而不是隐藏在您的页面中并在后台播放时...我会建议这些更改代码：

HTML 的

<a class="popupLink" href="http://www.youtube.com/embed/Qw7k_erTgow?autoplay=1&wmode=opaque"></a>

...并删除内嵌iframe <div id="popup"><iframe ...></div>

JS

$(document).ready(function() {
  $(".popupLink").fancybox({
    "padding": 1,
    "type": "iframe",
    "width": 853,
    "height": 480
  });
  window.setTimeout('$(".popupLink").trigger("click")', 100);
}); // ready

Fancybox Video在关闭时继续播放

1 个答案: