iframeによる埋め込み動画でz-index制御を可能にする＠YouTube

Webサイトの共通ヘッダーを固定（position:fixed）にしたら、ページのコンテンツ内に配置していたYoutube動画がこれ（共通ヘッダー）の下に潜らずに上にのっかってしまい、じゃぁz-indexで操作すればいいやと思ったら出来なかったのでメモ。

Youtube動画をYoutube側で発行してくれる共有のための埋め込みタグでWebページに記述するにはこんなタグです。

<iframe width="140" height="160" src="http://www.youtube.com/embed/動画のID" frameborder="0" allowfullscreen></iframe>

要素の重なりを操作したくてz-indexを使っても、このままではそれは効きません。

iframe要素に「wmode=”Opaque”」というのを追加し、動画のURL末尾に「?wmode=transparent」を追加すると、z-indexでの重なり順の指定が有効になります。

<iframe width="140" height="160" src="http://www.youtube.com/embed/動画のID?wmode=transparent" frameborder="0" wmode="Opaque" allowfullscreen></iframe>

あんまり使うことないけど、だからこそ忘れそうなんで一応メモ。

プロが教えるYouTubeビジネス活用術