水平方向の複数レベルのドロップダウンナビゲーションメニューを実装しようとしています。メニューのすぐ下（垂直方向）に、iframe 経由で YouTube ビデオが埋め込まれています。Firefox でメインレベルのナビゲーション項目の 1 つにマウスを移動すると、ドロップダウンメニューが正しく表示されます。の上にビデオ。
しかし、ChromeとIE9では、メニューとiframeの間の小さな領域にドロップダウンのほんの一部しか表示されません。残りの部分は後ろにiframe。
この問題はYouTubeの動画に関連しているようです。ないiframe。テストするために、iframe をビデオではなく別の Web サイトに向けると、IE でもドロップダウン メニューは正常に機能しました。
- 質問 1: WTF?
z-index:-999 !important;質問 2: iframe に明示的に を配置しても、なぜこの問題がまだ発生するのでしょうか?
YouTube 埋め込みコードに含まれる内部 CSS が何らかの形で上書きされているのでしょうか?
ベストアンサー1
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");
});
});