Youtube・ニコ動・楽天モーションウィジェットのiframeがz-indexを無視するのを回避

ググったら沢山でてくるので今さらなんですが、Youtubeなどのiframeがz-indexを無視する問題。これ一部のブラウザのみで発生している現象で、手元のブラウザで調べた範囲ではFFとIEでは問題なし。ChromeとSafari5では発生しました。

いままでWordpressの管理バーが隠れる程度だったので無視してたんですが、当サイト右上の上に戻るボタンが、楽天モーションウィジェットで隠れてしまったのでリサーチしました。

スポンサーリンク

こんな状態に

この問題は各サービスとも既に解決策があります。iframe内のFlashにwmode=transparentを指定することで解決します。

しかしサービス毎に指定方法が異なります。

サンプルとしてwmode=transparentの有無で2パターン貼ってみました。 問題のあるブラウザの場合、下の紫の要素が動画の上下をいったりきたりするハズです。

対処法をまとめると

youtube
<iframe src="http://www.youtube.com/embed/utWPKM5sLgg" /* 他はそのまま */
↓
<iframe src="http://www.youtube.com/embed/utWPKM5sLgg?wmode=transparent" /* 他はそのまま */
[/code]</dd>
<dt>ニコ動</dt>
<dd>[code]
<script src="http://ext.nicovideo.jp/thumb_watch/sm10331306" /* 他はそのまま */ 
↓
<script src="http://ext.nicovideo.jp/thumb_watch/sm10331306?tr=1" /* 他はそのまま */ 
[/code]</dd>
<dt>楽天モーションウィジェット</dt>
<dd>[code]
<script type="text/javascript">/*各パラメーター*/ </script> /* 他はそのまま */
↓
<script type="text/javascript">/*各パラメーター*/ rakuten_wmode="on";</script> /* 他はそのまま */

Chromeユーザーのシェアは今や無視できないので、メニューなどの重要な場所なら対処する必要がありそうです。

対処方法としては、当ブログのように対象が少なければ個別対応でよいですが、過去の全ての記事となったら、jQueryのスクリプトやWPのショートコードで一括処理するのが現実的です。

Youtubeだけの対応ならば、かちびとさんのスニペットでクライアントサイドで処理するのが良さそうですが、ニコ動はJavascriptのsrcなので、ショートコードで対応するmbdbさんのコードを改造するのが早そうです。

かちびとさんのjQueryでYoutubeのsrcにwmode=transparentを自動追加するスニペット
Youtubeでもz-indexが効くようにする「?wmode=transparent」パラメーターをjQueryで自動挿入する - かちびと.net
同じ仕事をするワードプレスのショートコード By mbdbさん
iframe形式のプレーヤーにz-indexが効かないときの対処法 | [M] mbdb

 

 

スポンサーリンク