Chrome および IE9 で埋め込み YouTube ビデオの背後にドロップダウン メニューが表示されるのはなぜですか?

YouTube Video Embedded via iframe Ignoring z-index?

水平マルチレベルのドロップダウン ナビゲーション メニューを作成しようとすると、ユーザーは次のような問題に直面しました。 Chrome と IE9 では、埋め込まれた YouTube ビデオの上にドロップダウン メニューが表示されないという異常がありました (Firefox では機能しました)。この問題は、使用されている iframe 技術ではなく、YouTube ビデオ自体に限定されています。

質問 1: なぜ矛盾が生じるのですか?

明示的に設定された z-index:-999 !重要; であっても。 iframe の場合、ドロップダウン メニューはビデオの後ろで隠れたままでした。これは、YouTube 埋め込みコード内の CSS 干渉を示唆しています。

質問 2: wmode による問題の解決

この状況を修正するには、YouTube 埋め込みコードに wmode を追加すると、問題が解決されるようです。具体的には、次のパラメータを利用できます:

• &wmode=Opaque
• &wmode=transparent

このソリューションが機能する背後にある技術的な理由は不明のままです。ただし、次のコード例はその実装を示しています:

<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" frameborder="0" wmode="Opaque"></iframe>

また、次の jQuery コードをデプロイして、ページ上のすべての iframe の z-index 問題を修正できます:

//Fix z-index youtube video embedding
$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});

wmode パラメータを使用することで、YouTube 埋め込みコードが期待どおりに動作するように調整でき、すべての主要なブラウザで埋め込みビデオの上にドロップダウン メニューが表示されるようになります。

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