Youtubeを最背面に設置する方法

この記事は2012年6月に公開したものです。ソフトウェアやサービスの仕様が変わり、現在の情報と異なる場合があります。

こんにちは。
SOHOデザイナーを目指しているAquaForest-アクアフォレスト-です。

Youtubeをホームページに設置した際に前面にでてきてしまい、他のコンテンツが後ろに隠れててしまう事があります。例えば画像をクリックさせて前面に出したいのに、Youtubeが前面に来てしまいうまく表示されないということがありました。
そこで下記のタグを追加すると「z-index」が正常に適用され画像を最前面に持ってくることができます。

<iframe src="http://www.youtube.com/embed/j7CDb610Bg0" frameborder="0" width="420" height="315"></iframe>

↓URLの最後に「?rel=0&wmode=transparent」を追加

<iframe src="http://www.youtube.com/embed/j7CDb610Bg0?rel=0&wmode=transparent" frameborder="0" width="420" height="315"></iframe>