YouTube ビデオの埋め込みが Web ページの z-index をオーバーライドするのはなぜですか?

YouTube ビデオの埋め込みによる z-index のオーバーライド

iframe を介して YouTube ビデオを埋め込むと、特に共有する要素で Web ページで予期しない動作が発生する可能性があります。同じ縦の空間。 Internet Explorer (IE9) や Chrome などの特定のブラウザでは、ビデオの上にレンダリングされたドロップダウンやその他の要素が iframe の背後に部分的に隠れて表示される場合があります。

なぜそれが起こるのか?

この動作は、iframe 自体が直接原因ではなく、YouTube の埋め込みコードに含まれる内部 CSS スタイルによって引き起こされます。このスタイルは、iframe に設定された z-index プロパティをオーバーライドし、ビデオの埋め込みのスタック順序がページ上の他の要素よりも高くなります。

解決策: wmode パラメーターを追加する

この問題を解決するには、「不透明」または「透明」のいずれかの値を持つ wmode パラメータを追加して、埋め込みコードを変更します。これにより、内部 CSS スタイルを無効にし、iframe の Z インデックスを尊重するように YouTube に指示します。

wmode を使用した埋め込みコードの例:

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

代替解決策: JavaScript

または、JavaScript を使用して、ページ上のすべての iframe に wmode パラメータを動的に追加することもできます。スニペットの例を次に示します:

<code class="javascript">$(document).ready(function (){
    $('iframe').each(function(){
        var url = $(this).attr("src");
        $(this).attr("src",url+"?wmode=transparent");
    });
});</code>

以上がYouTube ビデオの埋め込みが Web ページの z-index をオーバーライドするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。