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と同様の方法でレンダリングされるようになり、他Chrome、Firefox、Safari、Operaはもともと問題なかったので全て解決。のはず。

右の余白を消したいがためその原因はかなりしょうもない理由だった

まず。
CSSの振り分けでうまくいかず。

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:1024px)" href="ipad用.css"/>

これだとiPhoneでもこっちのCSSが読み込まれる。
ので、以下に変更。

<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad用.css" />

<link rel="stylesheet" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad用.css" />

で、要はPC用のCSSを適当にいじっていたためiPadのwidth「768px」を守られてなかったのが原因。width,margin,paddingを全部見直して、画像の横幅とかを変えて、あっさり解決。
iPadでブラウジングしているときに左右にぐりぐり動いたらどこかwidthではみ出ているところがあると思った方が良いかと。

とにかくmarginとpaddingは要注意。