0

当我在ie 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();
4

1 回答 1

0

我认为 inline 不是一个好主意，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：您可以通过在 URL 中添加尾随参数来启用视频的自动播放模式，例如：

<a id="video104" class="showVideo" href="http://www.youtube.com/embed/bYS2hrj9HzI?autoplay=1">show video</a>
于 2013-05-05T18:16:32.203 回答