1

何らかの理由で、パラメータを設定していても、「X」閉じるボタンを使用しても、YouTubeでFancyBoxの上に表示されるようにz-index設定された要素を完全に配置することはできません。9999iframewmodeopaque

FancyBox 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の助けのおかげで今は機能しています:)。FancyboxJSを次のように変更しました。

$('#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 に答える