FlashやYouTubeを埋め込んだ場合に、Thickboxより手前に表示されてまう

タイトルのような現象を見たことがあるでしょうか？

LiteboxやThickboxを利用しているページで、YouTubeやFlashを表示していると半透明な黒い背景より、手前に表示されてしまいます。

これはwmodeという値が指定されてないか「window」という値が設定されているからだそうだ。そこでwmodeを変更することで解決できそうだ。

埋め込んだFlashにはwmodeを『transparent（透明化）』か『opaque（不透明化）』のどちらかを設定してあげると、一般のHTMLと同じように背景に表示されるようになるようだ。

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="movie" value="hoge.swf" />
<param name="wmode" value="transparent" />
<embed src="main.swf" wmode="transparent" type="application/x-shockwave-flash" />
</object>

なお、『transparent』のほうはバグが色々と見つかってるようなので、利用するならば『opaque』のほうがよさそうだ。

YouTube動画のwmodeを変える場合は、URLに『wmode=opaque』を追加すれば対応されるようだ。

<iframe width="320" height="240" src="https://www.youtube.com/embed/NLy4cvRx7Vc?rel=0&wmode=opaque" frameborder="0" allowfullscreen></iframe>

liteboxやthickboxでこの様な問題が出てきたら、wmodeを確認・変更してみよう。

参考　YouTube動画を埋め込む際に重なり順序を指定する「wmode=”transparent”」を設定する方法 | BlackFlag

参考　はてブのiframeブックマークレットでembedにwmode=”opaque”指定してるから呼び出した後ニコニコ動画とかでコメント入力できないかも – JavaScriptとかPerlとかPHPとかさくらVPSとか勉強する

余談だが、Flashを非表示にする別の方法として、objectタグを非表示にしてしまうという荒業もある。（JavaScript内に記載）

▼非表示にする時

// Flash Display visibility=hidden
$("object").css("visibility","hidden");

▼再表示する時

// Flash Display visibility=visible
setTimeout(function(){
$("object").css("visibility","visible");
},500);