1

出于某种原因，即使我将参数设置为，即使是“X”关闭按钮，我也无法获得绝对位置元素，并z-index设置9999为出现在我的 FancyBox 上：iframewmodeopaque

花式盒子 v2.1.3

FancyBox Media v1.0.5

JS：

(function($) {
    $(function() {

        $('#splash-video')
            .fancybox({
                fitToView : true,
                width     : '100%',
                height    : '100%',
                margin    : 10,
                padding   : 0,
                helpers   : {
                    media : true
                },
                youtube : {
                    params : {
                        autoplay : 1,
                        fs       : 1,
                        hd       : 1,
                        rel      : 0,
                        showinfo : 0,
                        wmode    : 'opaque' // this no worky
                    }
                }
            });

        $('.skip-video').on('click', function() {
            $.fancybox.close();
            $(this).remove();
        });

        setTimeout(function() {
            $.fancybox.close();
            $('.skip-video').remove();
        }, 64000);
    });
})(jQuery);

HTML：

<a id="splash-video" href="http://www.youtube.com/watch?v=dQw4w9WgXcQ"></a>
<a href="#" class="skip-video">Skip Video</a>

上面激活了我的 FancyBox，然后单击触发出现，同时将我的.skip-video锚点位置放在顶部，但事实并非如此。

透明和不透明似乎对任何浏览器都没有影响；“X”关闭按钮和 div 在 Chrome 中的 YouTube 视频上方，但实际上没有其他主要浏览器（FF、IE7-9、Opera 和 Safari）。

总而言之，我认为 YouTube 参数都不起作用。

更新：

多亏了Janis的帮助，它现在可以工作了 :)。我将我的 Fancybox JS 更改为：

$('#splash-video')
    .fancybox({
        fitToView : true,
        width     : '100%',
        height    : '100%',
        margin    : 0,
        padding   : 0
    });

并将锚点更改为：

<a id="splash-video" class="fancybox.iframe" href="http://www.youtube.com/embed/opj24KnzrWo?autoplay=1&amp;autohide=1&amp;fs=1&amp;rel=0&amp;hd=1&amp;wmode=opaque&amp;enablejsapi=1"></a>

巨大的成功！

4

1 回答 1

2

  1. 为什么您认为所有参数都不起作用？您的视频是否自动启动？如果您检查开发人员工具，iframe 源是否看起来像这样？
    http://www.youtube.com/embed/opj24KnzrWo?autoplay=1&autohide=1&fs=1&rel=0&hd=1&wmode=opaque&enablejsapi=1
    如果是，那么脚本工作得很好。

  2. 我不知道你究竟是如何试图让绝对位置元素出现在 fancyBox 上，以及为什么它对你不起作用，但这对我来说很好：

    $(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    nextEffect  : 'none',
    prevEffect  : 'none'
});​

    测试用例。

于 2012-10-26T08:53:16.657 回答