LightboxやSlimboxなどで画像をオーバーレイ表示したときにYoutube PlayerなどのFlashコンテンツの裏側に隠れてしまう件
このブログもLightbox Plusを使っていますが、画像をLightboxやSlimboxなどを利用してJavaScriptでオーバーレイ表示している場合、Flashコンテンツの裏側に隠れてしまう場合があります。色々なブラウザで試してみたところYoutubeプレーヤーの場合Firefox以外は全滅な感じです。対処する方法がないものか調べてみたら有りましたのでメモしておきます。
実際の例として下の二つのYoutubeの動画を張りつけておきます。動画の下の画像をクリックしてみてYoutubeプレーヤーの裏に隠れるかどうか試してみてください。
◆対処していないもの(画像がプレーヤー裏に隠れる)
◆対処したもの(画像がプレーヤー裏に隠れない)
対処方法は下の様に動画のURLの後に下のオプションを追加することです。「wmode=opaque」
具体的には下の貼付けタグを
<iframe width="420" height="315" src="http://www.youtube.com/embed/Xi7ovpcJJ_M" frameborder="0" allowfullscreen></iframe>
下の様に変更します。
<iframe width="420" height="315" src="http://www.youtube.com/embed/Xi7ovpcJJ_M?wmode=opaque" frameborder="0" allowfullscreen></iframe>
これで、どのブラウザでも画像がyoutubeプレーヤーの裏側に隠れないようになるはずです。
その他フラッシュコンテンツのパラメーターとして渡す場合は
というようにパラメータを追加するといいようです。
おまけ
タグ : Ajax, Flash, javascript, YouTube