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

ss_1

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');
})

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

ss_2

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


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

なお、youtubeでコピーする埋め込みコードはiframeでyoutubeを参照しますが(2011.11.11現在)、wordpressの自動埋め込みはobjeceタグのようです。

ということでテスト。

ちなみにURLを自動的に埋め込みさせたくない場合は、どうするか…。とりあえず<div>〜</div>で囲んだらURL文字列として表示できました。

http://www.youtube.com/watch?v=wzrXc68gNjQ

divタグのほか、bやpreでも大丈夫のようです。
自動埋め込みは便利ですね。