IEで埋込みYouTubeが最前面に表示される

Flash特有の属性値を指定

スクロールに追従する固定ヘッダーを実装していたところ、IEでのみYouTubeを埋め込んだiframeがヘッダーより前面に表示されてしまうという現象が起きました。

本来は左図のようにヘッダーが最前面に表示されるべきところ、右図ではYouTubeが最前面になってしまっています。

これはレガシーなIEでのみ起こる現象ではなく、最新版のIEでも発生してしまいます。

z-indexを用いて重なり順を明示的に指定してみたのですが、効果はありませんでした。

調べたところ、wmodeというパラメータを指定すれば解決するそうです。

YouTubeをiframeで埋め込んだ際、iframe内にはFlashコンテンツが生成されるそうです。

Flashコンテンツには重なり順を指定するwmodeというパラメータがあり、デフォルトでは重なり順を無視して最前面に表示される「wmode=window」が設定されているとか。

これを「wmode=transparent」にすることで、背面に表示することが可能になります。

Flashの場合はembet要素の属性値として指定しますが、iframeによるYouTube埋込みの場合は、GETパラメータにこの値を指定します。

<iframe src="//www.youtube.com/embed/?wmode=transparent"></iframe>

これで、意図した表示に戻すことができました。

wmodeとは

僕自身はあまりFlashには馴染みがなかったので、wmodeという属性値について調べてみました。

helpx.adobe.com

window

SWF コンテンツは、Web ページ上で専用の長方形のウィンドウに再生されます。window を指定した場合、SWF コンテンツと HTML レイヤーは相互に影響し合うことはなく、Flash アプリケーションが常に最前面のアイテムになります。

direct

パスレンダリングを使用します。スクリーンバッファへの格納がバイパスされ、SWF コンテンツを直接画面に描画します。

コンテンツ再生のパフォーマンスを重視する場合にこの値を指定してください。Stage Video や Stage 3D などを使用するハードウェアアクセラレーションが有効になります。

opaque

SWF コンテンツが、その他の HTML 要素と同一レイヤーに配置されます。

SWF は不透明で、下層レイヤーにあるすべてのページ要素が非表示になります。

window やdirect を指定した場合と比較して、再生パフォーマンスが低下します。

transparent

SWF コンテンツが、その他の HTML 要素と同一レイヤーに配置されます。SWF ファイルの背景色（ステージカラー）は透明になります。

透明領域の背面にある HTML 要素は表示され、透明度によってブレンドされます。

window や direct を指定した場合と比較して再生パフォーマンスは低下します。

gpu

インターネット接続のテレビやモバイルデバイスなどにおける追加のハードウェアアクセラレーションを使用します。

その他の値を指定した場合とは対照的に、表示データリストグラフィックにおけるピクセルの正確性は保証されません。

その他の点については direct を指定した場合と同様です。

純然たるFlashコンテンツの場合、このwmodeによっては日本語の文字入力領域を設定しても入力ができないなど問題点があるそうですが、昨今ではさほど気にしなくてもよいでしょう。