ドロップダウン メニューが YouTube Iframe の下に表示されるのはなぜですか?

YouTube ビデオの妨害ドロップダウン メニュー: wmode による救済

開発者は、YouTube ビデオを Web ページに統合するという課題に頻繁に遭遇します。奇妙な例として、ドロップダウン メニューが YouTube の iframe に正しくオーバーレイできず、その下に表示されるというイライラする動作がユーザーから報告されています。この問題は Chrome や IE9 などのブラウザで発生していますが、Firefox は影響を受けません。

この異常に困惑すると、明示的に -999 に設定されている !重要な z-index プロパティがなぜ問題を解決できないのか不思議に思うかもしれません。問題。 YouTube の埋め込みコード内の内部 CSS がユーザー定義の設定をオーバーライドする可能性はありますか?

この謎めいた問題の解決策は、YouTube の iframe コードに wmode パラメータを追加することです。 &wmode=opaque または &wmode=transparent をソース URL に追加すると、ドロップダウン メニューの動作が復元されます。この修正に関する包括的な技術的説明はまだわかりにくいですが、z-index の競合に効果的に対処します。

変更された iframe コードの例を次に示します。

<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 に wmode パラメータを自動的に追加します。

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

このシンプルなソリューションを実装することで、開発者は YouTube iframe 上にドロップダウン メニューを邪魔されずにオーバーレイできるようになり、シームレスなユーザー エクスペリエンスを確保できます。

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