HTML5 に対応した Youtube 動画を貼る方法

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>

Continue reading