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 + '&wmode=transparent'); });
とかするとよさそう。