So-net無料ブログ作成
» スポンサーリンク

Lightbox系の画像スライドショーとYouTubeのiframe版埋め込みプレイヤーが重なるのを回避するには
» 雑記・その他 

YouTube が iframe 形式の埋め込みコードの提供を先月から正式開始してから、このブログで使っている画像のスライドショーの jQuery プラグイン Colorbox の表示が、YouTube のプレイヤーと重なって表示されているのに今頃になって気付きました。(気付くの遅っw)

↓こんな感じで重なって表示されてしまいます

奥が jQuery プラグインの Colorbox、手前が iframe 版 YouTube

 object/embed タグで Flash を表示する古い形式では、object の param に wmode を追加して transparent を指定 (embed の属性にも追加)してやれば良いのは知っていて、Colorbox のトップページの下にあるヘルプ項目にも同様の対策方法が書かれていたのですが、iframe 版の場合どうすればいいかまでは書かれてませんでした。

<param name="wmode" value="transparent" ></param>

 ちょっと困りつつ、URL に渡すパラメータのほうにも同じようなものがあるんじゃないかと、Google Code のYouTube の埋め込みプレイヤーのパラメータ一覧を見てみたのですが、それらしいものは見当たらず。

 何か解決方法はあるはずと思ってしつこくいろいろ調べていると、海外の見知らぬ掲示板 (URL 失念)で同じことで悩んでいる人の書き込みと解決策を発見。

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/XXXXXXXXXX?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

 その方法が「URLの後ろのパラメータに &wmode=transparent を追加する」というもので、さっそく試してみたところ効果がありました。



このパラメータが Google が公式に発表しているものかどうかまでは確認してないのですが、とりあえず上手くいったので記事にしてみました。

同じことで悩んでいる方の参考になれば幸いです。

[追記] 2011/05/04
wmode=transparent が指定されると再生処理が若干重くなるのか、IE では映像のコマ落ちが発生する場合があるかもしれません。
(他のブラウザでは問題ないようです)

[追記] 2012/02/21
楽天アフィリエイトのモーションウィジェットでも同様のことが発生しますが、こちらは JavaScript の埋め込みコードの最後に rakuten_wmode="on"; を追加すれば回避できます。

↓楽天モーションウィジェットの JavaScript 埋め込みコードの例
<script type="text/javascript">
<!--
rakuten_design="slide";
rakuten_affiliateId="楽天アフィリエイトID";
rakuten_items="ranking";
rakuten_genreId="112493";
rakuten_size="160x600";
rakuten_target="_blank";
rakuten_theme="gray";
rakuten_border="off";
rakuten_auto_mode="off";
rakuten_genre_title="off";
rakuten_recommend="on";
rakuten_ver="20100708";
rakuten_wmode="on";
//-->
</script>


[関連サイト]
 YouTube
 Colorbox - customizable lightbox plugin for jQuery 1.3 and 1.4
 Google Code - YouTube 埋め込みプレーヤーのパラメータ
nice!(1)  コメント(4)  トラックバック(0)   » カテゴリー:雑記・その他
permalink
trackback


» スポンサーリンク


nice! 1

コメント 4

ISプランニング

まさしく悩んでましたので、本当に助かりました!

ありがとうございます。
by ISプランニング (2011-02-21 13:23) 

TAN

お役に立てたようでよかったです。
記事のリンクまでして頂いて恐縮です。

by TAN (2011-02-21 19:52) 

モモコ

本当に助かりました!!
私も英語のサイトまではたどり着けたのですが
いまいちわからず、こちらにたどり着きました。
たすかりました!ありがとうございます♪
by モモコ (2012-02-21 19:19) 

TAN

モモコさん、はじめまして。
お役に立てたようでよかったです。

wmodeにtransparentが指定されると再生に少しだけ負担がかかるようなので、重なる動画だけ指定して、重なっていないときは極力指定しないほうがいいかもしれません。
by TAN (2012-02-21 20:29) 

コメントを書く

名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

Facebook コメント

トラックバック 0

トラックバックの受付は締め切りました

iTunes Store 音楽アプリベストセラー
for iPad





for iPhone/iPod touch





for Mac