Home > HTML&XHTML > YouTubeのiframe版埋め込みコードでもwmodeを有効にする

YouTubeのiframe版埋め込みコードでもwmodeを有効にする

随分前にYouTubeの埋め込み用ソースをValidにするという投稿をしたんですが、
最近仕様が変わったらしく、埋め込み用として表示されるソースがiframeになってました。
どうもiframe版だと内部でHTML5プレイヤーとの切り替えが行われるようです。

youtube まるさん

これをそのまま貼ってみたところ、デフォルトではwmodeが効いてないことが判明。
position:absoluteとz-indexで要素を重ねるとFlashが上に来てしまう。(上の画像をクリックするとテストできます)

解決方法

貼り付け用iframeのURLに ?wmode=transparent を追加するだけです

HTML:
  1. <iframe title="YouTube video player" width="560" height="349" src="http://www.youtube.com/embed/2XID_W4neJo?wmode=transparent" frameborder="0" allowfullscreen></iframe>

Overlay Test

その他のパラメータ

wmode以外のパラメータも&や&amp;で繋げて使えます。

  • hd=1 - HDで再生
  • autoplay=1 - 自動再生
  • loop=1 - ループ再生
  • rel=0 - 関連動画を含めない
  • disablekb キーボードによる操作(1:有効 0:無効)
  • start - 再生位置指定(秒)
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Comments:0

Comment Form
Remember personal info

Trackbacks:1

Trackback URL for this entry
http://tenderfeel.xsrv.jp/html-xhtml/1135/trackback/
Listed below are links to weblogs that reference
YouTubeのiframe版埋め込みコードでもwmodeを有効にする from WebTecNote
pingback from YouTube動画を埋め込む際に重なり順序を指定する「wmode=”transparent”」を設定する方法 | BlackFlag 11-07-11 (月) 18:35

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

Home > HTML&XHTML > YouTubeのiframe版埋め込みコードでもwmodeを有効にする

最近の投稿
最近の修正
Tag Cloud
おすすめサーバー・他
メタ情報

Return to page top