YouTubeの動画をWebページ上に掲載する際に、
ちょっとハマりそうになったwmodeの指定のメモ書き。

今ではYouTubeの動画はiframeを使って簡単にWebページに埋め込むことが可能となっていますが
iframe内に生成されるFlash埋め込みタグ(embedなど)では、
要素の重なり具合を指定するwmodeの値がデフォルトでは「wmode=”opaque”」になっています。

このままのの指定だと、同じページ上でモーダルウィンドウの様なz-indexなどの
レイヤー指定を使ってコンテンツ要素の重なり具合を制御しようとしても
Flash要素が最前面(一番上)に表示されてしまいます。

本来その様な場合には、embedタグ内に「wmode=”transparent”」という指定すれば
Flash要素は背面に表示されるのですが、YouTube埋め込みiframeの場合は
ソースが自動で生成されるので直接タグを追記することはできません。

そんな状況で困っていたら、
ちゃんと埋め込みタグに追加でパラメータを付与することで
wmodeの指定を切り替えることが可能になっていました。

記述法について、
まず、通常のYouTube埋め込みタグは以下の様な感じになり、

◆追記前
<iframe width="425" height="349" src="http://www.youtube.com/embed/5xLLvnAtBig?rel=0" frameborder="0" allowfullscreen></iframe>

これを実際に埋め込むと以下の様になります。

wmodeの指定を追加する際は、
この埋め込みタグの動画ファイルパスの後に「?wmode=transparent」パラメータを追加します。

デフォルトで「?rel=0」のパラメータが一つ付いているので、続けて記述する場合は頭を「&」にして、
「?rel=0&wmode=transparent」と記述。

◆追記後
<iframe width="425" height="349" src="http://www.youtube.com/embed/5xLLvnAtBig?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>

これを実際に埋め込むと以下の様に。

見た目は変わりませんが「Firebug」などで生成されたソースを確認すると
wmodeの値が「transparent」になっています。

こうしておくことで同じページ上でモーダルウィンドウなどのz-indexを使った要素を使っても
YouTube動画枠が最前面に表示されることはありません。

他にも追加パラメータは色々用意されているようで
——————————————–
hd=1 → 高画質(HD)モード
autoplay=1 → オート再生
loop=1 → ループ再生
rel=0 → 関連動画を含めない
start → 秒単位での再生位置の指定
——————————————–
などなどもっと他にもいろいろあるようです。

YouTube動画の埋め込みで困った際に是非。。。

◆参考サイト
WebTecNote – YouTubeのiframe版埋め込みコードでもwmodeを有効にする

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (7)

  • akikoyana | 2011.11.09 19:25

    こんにちは。
    IE7とChromeで、youtubeが主張しすぎて前面に出てきてしまい、大変困っていたので、助かりました…!
    ありがとうございました!
    いつもあまりみませんが、パラメーターの指定もいろいろあるんですね。

  • BlackFlag | 2011.11.10 0:35

    コメントありがとうございます!

    YouTubeの重なり具合は始め焦りますよね。。。
    お役に立ててよかったです!
    YouTubeのパラメータ設定は意外とたくさんあるので
    いろいろ試して遊んでみてください。

    また何かありましたらよろしくお願いします。

  • lunako | 2012.07.10 0:24

    最近グローバルメニュー+プルダウンを付けたら
    サイドバーにあったYouTubeの後ろになって
    ε=ε=ε=ε= ヒイィィィ!!!!( ̄⊥ ̄ノ)ノとなりここに辿り着きました^^ 
    おかげでプルダウンもブログパーツも隠れることなく表示され
    助かりましたヽ(・∀・)ノパッ☆彡
    ありがとうございます♪

  • BlackFlag | 2012.07.10 0:47

    > lunakoさん

    コメントありがとうございます!
    この記事がお役に立ったようで嬉しく思っております。

    動画がいきなり前面に表示されると焦りますよね。。
    無事に理想の表示になったようでよかったです。

    また何かありましたら
    よろしくお願いします。

  • FlashやYouTubeを埋め込んだ場合に、Thickboxより手前に表示されてまう | ninnin.in | 2013.05.13 23:38

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

  • benten | 2015.03.27 15:51

    WordPresでYouTubeを組み込んだブログを製作している時にIEでこの現象が出てしまい、困っていたのですが、偶然このページにたどり着き無事に解決する事が出来ました♪
    説明も分かり易くてホント助かりました!ありがとうございました(*^。^*)

  • BlackFlag | 2015.03.29 0:45

    >bentenさん
    コメントありがとうございます。
    当記事の内容がお役に立ったようで嬉しく思っております。

    他にもいろいろと紹介させていただいておりますで
    あれこれご活用いただけると幸いです。

    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner