youtube - YouTube動画の上にないFancyboxの閉じるボタン

Question

私がYouTubeビデオで遭遇している問題は、右上にある「閉じるx」ボタンがYouTubeビデオの上にないことです。どういうわけかそれは彼らの下に立ち往生しています。すべてのブラウザで試してみて、IEの問題かどうかを確認しましたが、すべてのYouTube動画で発生しているようです。

また、.cssにアクセスし、z-indextを非常に高い数値に変更して、修正されるかどうかを確認しましたが、運が悪かったので、誰かがこの問題に遭遇しましたか？YouTubeの動画だけに限定されているようです。

Answer 1

これは、YouTubeが使用するFlash Playerが、デフォルトのウィンドウモード（パラメーター名はwmode）でCSSのz-index値を尊重しないためです。

YouTube iframeを埋め込む場合は、URLにwmode = opaqueパラメーターを追加します（wmode =transparentも機能します）。これにより、次のようになります。

<iframe width="420" height="315" src="http://www.youtube.com/embed/<youtbue_id>?wmode=opaque" frameborder="0" allowfullscreen></iframe>

Answer 2

@ complex857は正しいです、あなたはyoutubeビデオのwmode設定を（に）変更する必要があります。opaque

それを行うための最良の方法は次のとおりです。

1）。ここからfancybox（およびヘルパー）の最新リリースを入手してくださいhttps://github.com/fancyapps/fancyBox/tree/master/source

2）。通常のfancyboxcssおよびjsファイルのほかに、次のようなfancybox-mediaヘルパーjsファイルを追加します（独自のパスを確認してください）。

<script type="text/javascript" src="fancybox2.0.6/helpers/jquery.fancybox-media.js"></script>

3）。この新しいバージョンでは、次のようなカスタムスクリプトを使用して特定のパラメータをYouTubeに渡すことができます。

   $(document).ready(function(){
    $(".fancybox").fancybox({
        // other API options here
        padding: 0, // optional
        // set helpers media
        helpers : {
         media : {}
        },
        // NEW youtube media settings
        youtube : {
         autoplay    : 0, // 1 = will enable autoplay
         wmode       : 'opaque'
        }
    }); // fancybox
   }); // ready

注：これはfancyboxv2.0.6+用です