カメラとか、ノートとか。

X-E2が好きなおっさんのブログ

Youtubeの動画を埋め込むとき

Youtubeの動画を埋め込む方法は現在2つある。
動画下部の「共有」から「埋め込みコード」を選択するとコードが表示され、現在ではiframeのシンプルなコードになっている。

<iframe width="●" height="●" src="動画のURL" frameborder="0" allowfullscreen></iframe>

●の部分は動画サイズで、任意に指定できる。

さらに下部の「以前の埋め込みコードを使用する」にチェックを入れると、その名の通り以前のコードが表示される。こちらはembedを使ったおり、長い。

<object width="●" height="●"><param name="movie" value="動画URL"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="動画URL" type="application/x-shockwave-flash" width="●" height="●" allowscriptaccess="always" allowfullscreen="true"></embed></object>


で、最初のiframeのほうを使ってみると、IE8で表示されない。空白のフレームになってしまった。
なら以前のコードで、と思ったら今度はsafariで表示したときに、サイドのスクロールバーにかぶってしまい、おかしな表示になってしまった。
いまちょっと横スクロールのサイトをつくっていて、このレイアウト上、サイドバーにかぶるのは致命的な問題なのだ。

で、解決策。

コードはiframeのものを使用し、HTMLに次の一行を追加

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

この一行でIE7と同様の方法でレンダリングされるようになり、他ChromeFirefoxSafariOperaはもともと問題なかったので全て解決。のはず。