ドロップダウンメニューの YouTube iframe がブラウザごとにレンダリングが異なるのはなぜですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-05 05:38:02

オリジナル

826 人が閲覧しました

Why do YouTube iframes in dropdown menus render differently in different browsers?

特定のブラウザでは、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 サイトの他の関連記事を参照してください。