[解決済み] YouTube動画をiframeで埋め込むとz-indexが無視される？

質問

水平方向のマルチレベル ドロップダウン ナビゲーション メニューを実装しようとしています。メニューのすぐ下 (垂直方向) に、iframe を介して埋め込まれた YouTube 動画を表示させています。Firefox でメイン レベルのナビゲーション アイテムの 1 つにカーソルを置くと、ドロップダウン メニューが適切に表示されます。 の上に の上に表示されます。

しかし、Chrome と IE9 では、メニューと iframe の間にある小さな領域に、ドロップダウンの一部だけが表示されます。 残りの部分は の後ろにあります。 にあるようです。

この問題は、YouTubeの動画に関係しているようです。 ではなく ではありません。テストとして、動画ではなく別の Web サイトに iframe を向けてみたところ、IE でもドロップダウンメニューは正常に機能しました。

• 質問 1: WTF?
• 質問2：なぜ、たとえ私が明示的に z-index:-999 !important; を付けても、この問題が発生するのはなぜですか？

YouTube の埋め込みコードに含まれる内部 CSS が何らかの形で上書きされているのでしょうか？

どのように解決するのですか？

wmodeを追加してみてください。パラメータが2つあるようです。

&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">

またはこれ

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