CSS3+HTML5

ドロップダウンメニューがyoutube動画の下に隠れる

2014年12月19日  

グローバルナビでドロップダウンメニューを使用していて、
メインビジュアル部分に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&amp;controls=0&amp;showinfo=0&amp;wmode=transparent" frameborder="0" allowfullscreen></iframe>[/php]

パラメータがなければ、ファイルパスの後に「?wmode=transparent」なのですが、
「?rel=0」などパラメータがついていれば、その後に

「&wmode=transparent」

これで、ドロップダウンメニューがyoutube動画の下に隠れなくなります。

動画の下に隠れてしまう時は、z-indexの前に、こちらを試してみてください。