lightboxとyoutubeの重なりの修正とYouTube自動埋め込み 2011年11月11日（金）

[jquery.lightboxとYouTubeの重なりの修正]
jquery.lightboxなどを使用した際で、YouTubeのFlashオブジェクトが前にきてしまうことがあります。

safariやfirefoxでは jquery.lightbox-0.5.css の三カ所のz-indexを大きい数字にすることで対応できました。

#jquery-overlay {z-index: 900;}
#jquery-lightbox {z-index: 1000;}
#lightbox-nav {z-index: 100;}

z-indexの値はこちらで指定して確認したものです。
しかし、chromeでは上記画像のように重なりを修正することができませんでした。

対応方法を探したところ、参考になる記事がありました。
iframeの参照先におなじみ、 wmode=transparent をつけることで参照先のflash埋め込みタグに　&mode=transparent が指定されるようです。

「WordPressで運営しているサイトでYouTubeを使う際に知っておくと得するっぽいTips」
http://kachibito.net/wordpress/youtube-tips.html

しかし、上記サイトでは

$('iframe').each(function(){
      $(this).attr('src',$(this).attr('src')+'?wmode=transparent');
})

とありますが、動かず。。

$('iframe').each(function(){
      $(this).attr('src',$(this).attr('src')+'&wmode=transparent');
})

と「?」を「&」にしたら問題無く表示できました。

[Wordpressのyoutube自動埋め込み]
なお、上記サイトのコメント欄にもありますが、wordpressでは「設定」の「メディア」から自動埋め込みの設定をするとyoutubeの動画のURLを入力するだけで自動的にプレーヤーを埋め込みしてくれます。
わざわざ埋め込みコードをコピペする必要はありません。

予め横幅など設定しておくこともできます。