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");
    });
});