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="https://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="https://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動画の埋め込みで困った際に是非。。。