ドロップダウン メニューの YouTube iframe がブラウザごとにレンダリングが異なるのはなぜですか?

特定のブラウザでは、iframe に埋め込まれた YouTube ビデオが Z-index を無視します

iframe を介してその下に YouTube ビデオが埋め込まれた複数レベルのドロップダウン ナビゲーション メニューが、特定の Web でレンダリングの問題を引き起こしていますブラウザ。 Firefox ではドロップダウン メニューがビデオの上に表示されますが、Chrome と IE9 ではその一部だけが表示されます。

驚くべきことに、原因は iframe ではなく、YouTube ビデオ自体です。 iframe を他の外部 Web サイトにターゲットに設定すると、IE でもドロップダウン メニューが適切に表示されます。これは、YouTube の埋め込みコードに問題がある可能性を示しています。

専門家は、次の 2 つの値を持つ wmode パラメータを組み込むことを推奨しています:

• Opaque
• transparent

その効果を説明するドキュメントが限られているにもかかわらず、このパラメータを次のようにビデオの URL に追加します。以下の例に示すように、問題は解決されます。

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

また、jQuery スクリプトを使用して、ページ上のすべての iframe を変更することもできます。

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

このアプローチでは、 YouTube 動画の z-index 優位性により、ドロップダウン メニューやその他の要素をその上に正しくレンダリングできるようになります。

以上がドロップダウン メニューの YouTube iframe がブラウザごとにレンダリングが異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。