IEでのYouTubeの重なり順を調整する

ヘッダー追従のサイトでページ内にYouTubeを埋め込む場合など、YouTube上に他要素を重ねることがあると思います。
この時、z-indexをきちんと指定していても、IEでだけYouTubeプレーヤーがヘッダーの上に重なってしまうことがあります。
今回はこの対応方法を試してみます。

サンプルコード

ヘッダーを固定して、ページ内にYouTubeプレーヤーを埋め込みます。

HTML

<div id="bar">ヘッダー</div>

<div id="contents">
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/RwCH3zT4eF4" frameborder="0" allowfullscreen></iframe>
</div>

CSS

#bar {
	position: fixed;
	z-index: 100;
}
#contents {
	position: relative;
	z-index: 10;
}

IEでのYouTubeの重なり順を調整するデモページ
IEで見た時だけ、YouTubeプレーヤーがヘッダーの上に重なってしまいます。
　

解決方法

YouTubeプレーヤーのURLに「wmode=transparent」というパラメータをつけることで対応できます。
現在のURLにパラメータが付いていない場合は「?wmode=transparent」を、
パラメータが付いている場合は「&wmode=transparent」をURLの最後に追加してください。

HTML

<div id="bar">ヘッダー</div>

<div id="contents">
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/RwCH3zT4eF4?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div>

IEでのYouTubeの重なり順を調整するデモページ2
　

【参考サイト】

• YouTube動画を埋め込む際に重なり順序を指定する「wmode=”transparent”」を設定する方法 | BlackFlag