Home > Movable Type > | Web > | iPhone > HTML5 に対応した Youtube 動画を貼る方法

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

Posted by: delphinus
2010年8月28日 18:31
Movable Type | Web | iPhone
Tweet

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

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

これは Flash による再生にしか対応していないし、お世辞にもきれいなタグとも言えない ^*1 。そこで、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`)

*1 : さらに、W3C Validation も通らない。

“Movable Type”カテゴリーの記事

そのほかの関連記事

Comments:0

Trackbacks:1

TrackBack URL for this entry: http://blog.remora.cx/mt/mt-tb.fcgi/674
Listed below are links to weblogs that reference: HTML5 に対応した Youtube 動画を貼る方法 from blog.remora.cx