Tweet

Youtube の動画をブログ等に貼るとき、従来は <object> タグを使って次のように書いていた。

<object width="640" height="385">
<param name="movie" value="http://www.youtube.com/v/SuY6wrMDptA&amp;hl=ja_JP&amp;fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/SuY6wrMDptA&amp;hl=ja_JP&amp;fs=1"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true" width="640" height="385"></embed>
</object>

これは Flash による再生にしか対応していないし、お世辞にもきれいなタグとも言えない(さらに、W3C Validation も通らない。)。そこで、HTML5 版 Youtube にも対応したスマートなタグが推奨されている。

【レビュー】YouTubeビデオの組み込みでHTML5 VideoとFlashの両方をサポートする方法 | ネット | マイコミジャーナル
http://journal.mycom.co.jp/articles/2010/07/26/youtube-for-flash-and-html5/index.html

<iframe class="youtube-player"
width="640" height="385"
src="http://www.youtube.com/embed/SuY6wrMDptA"
frameborder="0"
></iframe>

実際の例

Google Chrome のような対応ブラウザでは HTML5 版が表示され、一般的なブラウザでは Flash による再生がサポートされる。iPhone でもきちんと認識されるようだ。

<iframe> を使うと標準では 1 ドットの枠が表示されるのだが、これを消すためには例に挙げたように frameborder="0" と書けばよい。ところが、frameborder は非推奨の属性であり、そのままでは、W3C Validator を通らない。解決策としては、これを CSS で代替する。

スタイルシート［CSS］/フレーム/インラインフレームの境界線を指定する – TAG index Webサイト
http://www.tagindex.com/stylesheet/frame/border.html

.youtube-player {
    border: none;
}

でも、これも IE には効かない。ほんとどうしようもないブラウザだよな(‘A`)