Question

当我在if 10中隐藏带有iframe的fancybox时，fancybox消失了，iframe卡住了。 Fancybox版本：2.1.4。我的HTML：

<ul class="gallery_new">
    <li id="104" class="video">
        <span>title</span>
        <a href="images/gallerys/kids/big/wipeout2.jpg" class="fancybox">
            <img src="images/g2allerys/kids/thumbnails/wipeout2_thumb.jpg">
        </a>
        <a class="showVideo" href="#video104"></a>
    </li>
</ul>

<div style="display:none" id="video104">
    <iframe width="425" height="355" src="http://www.youtube.com/embed/bYS2hrj9HzI" frameborder="0" allowfullscreen=""></iframe>
</div>

js是：

$("ul.gallery_new > li > a.fancybox").fancybox({
        openEffect  : 'elastic',
        closeEffect : 'elastic',

        helpers : {
            title : {
                type : 'inside'
            }
        }
    });

  $("ul.gallery_new > li > a.showVideo").fancybox();

Answer 1

我认为内联iframes不是一个好主意，除非是绝对必要但在你的情况下我不这么认为。

您可以移除隐藏的内联容器id="video104"并修改您的html，直接链接YouTube视频：

<a id="video104" class="showVideo" href="http://www.youtube.com/embed/bYS2hrj9HzI">show video</a>

然后使用这个脚本：

$("a.showVideo").fancybox({
    type: "iframe",
    width: 425,
    height: 355,
    fitToView: false
});

这样做，只有在需要时才会调用您的视频。这也有助于改善页面加载。

参见 JSFIDDLE

注意：您可以通过在网址中添加?autoplay=1作为尾随参数来启用视频的自动播放模式，如：

<a id="video104" class="showVideo" href="http://www.youtube.com/embed/bYS2hrj9HzI?autoplay=1">show video</a>

fancybox2即10，iframe不会消失

1 个答案: