ドロップダウンメニューがyoutube動画の下に隠れる
グローバルナビでドロップダウンメニューを使用していて、
メインビジュアル部分にyoutube動画を埋め込んだ場合、
ドロップダウンメニューがyoutube動画の下に隠れてしまう時があります。
(chrome、firefoxで問題なくてもIEでなる)
そんな時、z-indexで何とかしようとしても何とかならない。。。。
YouTubeの動画の埋め込みコードはiframeを使って埋め込むことが可能ですが
要素の重なり具合を指定するwmodeの値がデフォルトでは「wmode=”opaque”」になっているそうです。
なので、普通に貼り付けていると
z-indexなどレイヤー指定を使ってコンテンツ要素の重なり具合を制御しようとしても
youtube動画が最前面(一番上)に表示されてしまいます。
ドロップダウンメニューがyoutube動画の下に隠れる場合の対処法
埋め込みタグの動画ファイルパスの後に「?wmode=transparent」パラメータを追加。
[php]<iframe width="640" height="360" src="//www.youtube.com/embed/mt7rGhAm2CY?rel=0&controls=0&showinfo=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>[/php]
パラメータがなければ、ファイルパスの後に「?wmode=transparent」なのですが、
「?rel=0」などパラメータがついていれば、その後に
「&wmode=transparent」
これで、ドロップダウンメニューがyoutube動画の下に隠れなくなります。
動画の下に隠れてしまう時は、z-indexの前に、こちらを試してみてください。