Chrome と IE9 でドロップダウン メニューが YouTube 動画の後ろに表示されるのはなぜですか?

YouTube ビデオの埋め込みと Z-index の問題

マルチレベルのドロップダウン ナビゲーション メニューの下に iframe を使用して YouTube ビデオを埋め込む場合、次のような問題が発生する可能性があります。 Chrome および Internet Explorer でビデオの背後にドロップダウン メニューが表示される問題。メイン ナビゲーション項目の上にマウスを移動すると、すべてのブラウザでドロップダウンがビデオの上部に表示されます。

質問 1: Chrome と IE9 で YouTube ビデオの後ろにドロップダウン メニューが表示されるのはなぜですか?

この問題は、iframe ではなく、YouTube ビデオ自体に関連しています。 YouTube の埋め込みには、z-index 値を含む他の CSS 設定をオーバーライドする内部 CSS が含まれています。

質問 2: z-index:-999 を設定するとなぜ !重要; iframe でまだ問題が発生していますか?

YouTube 埋め込みコード内のオーバーライド CSS は、iframe に適用する Z-index 設定よりも優先されます。

解決策:

この問題を解決するには、埋め込みビデオの URL に次のパラメータを追加します。

&wmode=Opaque

この設定により、ビデオが背景に溶け込み、ページ上の他の要素が許可されます。

追加メモ:

• Opaque の代わりにパラメータ wmode=transparent を使用することもできますが、これにより透明になる場合があります。一部のブラウザでは問題が発生します。
• また、以下のコード スニペットに示すように、jQuery を使用して、ページ上のすべての iframe の URL をロード前に変更することもできます。

$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

以上がChrome と IE9 でドロップダウン メニューが YouTube 動画の後ろに表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。