[CSS] YouTube の埋め込みコードに z-index が効かないことへの対策

ブログなどに YouTube の動画を埋め込みたい場合は良くあると思いますが、
動画のページで発行されるコードをそのまま HTML に埋め込んでも z-index が効きません。
なので、例えばこのサイトのようにヘッダーやフッターを position:fixed にしていたりすると、
固定されている要素より iframe要素の部分の方が前面に表示されてしまいます。

解決方法

そこで、その解決方法ですが、
例えば　YouTube で次のコードを発行したとします。

<iframe width="420" height="315" src="http://www.youtube.com/embed/OX0-8kQnWt4" frameborder="0" allowfullscreen></iframe>

動画は僕が大好きな「GAGAKIRISE」というバンドです。

このままでは前述したような状態になってしまうため、次の二つの作業をします。

iframe要素へプロパティを追加

動画ページで発行されたコードに以下のプロパティを追加します。

frameborder="0" wmode="Opaque"

執筆時点では frameborder に関しては発行時点でコードに付加されています。

URLへパラメータを追加

次に発行されたコード内にあるURLの末尾に以下のパラメータを追加します。

?wmode=transparent

これで、z-index が効くようになります。

先に出した埋め込みコードの例でいくと、改変後は次のようになります。

<iframe width="420" height="315" src="http://www.youtube.com/embed/OX0-8kQnWt4?wmode=transparent" frameborder="0" allowfullscreen wmode="Opaque"></iframe>

ちなみに

HTML5 では iframe要素の frameborder属性が廃止されていますので、
バリデーターにかけるとマークアップエラーとなってしまいます。
ブラウザの対応状況によって表示結果はまちまちかと思いますが、
当サイトでは以下のような対応をしています。参考までに。

CSS で iframe要素に border:none; を指定する
iframe要素に seamless属性を付加する

トラックバックURL

http://mashimonator.weblike.jp/mt/mt-tb.cgi/185