動画をiframeで埋め込んだ時のz-indexきかない問題(chrome)

iframeのコードでYouTube動画埋め込んだときに、z-indexきかないよ(動画の上になんか要素のるときなど)問題。
safariではcssの通りの挙動になるのだけど、chromeだとiframe(youtube)の内容が最前面にくる。

というのはiframeのsrcに「wmode=transparent」を加えてあげるとよい。

<iframe width="560" height="345" src="http://www.youtube.com/embed/t_htoSaQFf4?rel=0" frameborder="0" allowfullscreen></iframe>

<iframe width="560" height="345" src="http://www.youtube.com/embed/t_htoSaQFf4?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

にする感じ。

一括で書き換えるなら、jQueryつかって

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

とかするとよさそう。

コメントをどうぞ

メールアドレスが公開されることはありません。 が付いている欄は必須項目です