YouTubeの埋め込みタグをXHTML1.0 strictでvalidにする。

2011年04月11日 正午の月齢:7.9  月名:弓張月(上弦)  潮汐:小潮 月齢:7.9[弓張月(上弦)] 潮汐:小潮 | 6年前 | 旧暦:2011年03月09日 | 大安
ソフトウェア | コメントはありません

この記事を読むのに必要な時間の目安: 5分ぐらい

この記事は6年以上前のものです。情報が古い場合があります。

最近立て続けにYouTubeの動画を、YouTubeの埋め込みコードをそのまま使って貼り付けていたのですが、Another HTML-lintで確認してみると結構悲惨な点数でした。XHTML1.0 strictで記述している当サイトでembed要素を使っているのが減点の大きな原因ですが、IE対策のために使われている感じです。

そのままではなんとも悔しいので、100点満点になるソースを検討してみました。

まずは条件分岐でIE以外とIEを振り分ける方法。参考にしたのはphp & javascript room身延の風より。それをアレンジして次のようにまとめました。

<p>
<object data="http://www.youtube-nocookie.com/v/l-SP2MUo13w?fs=1&amp;hl=ja_JP&amp;rel=0" width="640" height="390">
<param name="autostart" value="false" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />&#8204;</object>
</p>
<!--[if IE]>
<p>
<embed src="http://www.youtube-nocookie.com/v/l-SP2MUo13w?fs=1&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390" />
</p>
<![endif]-->

この中で、php & javascript roomで紹介されている<!--[if !IE]> <-->でIE以外に適用する方法は文法的にペケなので使わずに、全ブラウザに適用させてからIE用の条件を当てるようにしています。このときIEはobject要素の等価内容のテキストを読むので、zero width non-joinerの数値実体参照「&#8204;」を入れておきました。

どうも複雑だけどこれでいいかな、と思っていたのですが、object要素だけでもいけるみたい。参考にしたのは小粋空間など。「object要素にtype属性を追加し、属性値にembed要素のtype属性値(application/x-shockwave-flash)を記述」するのがポイントのようです。

<p>
<object data="http://www.youtube-nocookie.com/v/l-SP2MUo13w?fs=1&amp;hl=ja_JP&amp;rel=0" width="640" height="390" type="application/x-shockwave-flash">
<param name="movie" value="http://www.youtube-nocookie.com/v/l-SP2MUo13w?fs=1&amp;hl=ja_JP&amp;rel=0" />
<param name="autostart" value="false" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />等価ほげほげ</object>
</p>

という感じです。IE6sp1とFirefox3.6.16で確認しただけですが、表示・再生ともにOK! Another HTML-lintでも100点でしたー。

・・・調べたら、こんな方法でもvalidにできるとか。「YouTube Perfect Embed」YouTubeの貼り付け用コードをXHTML Validでサムネイル付きにするブックマークレット いろいろあるなぁ。

参考:youtubeの埋め込み用HTMLをvalidにするブックマークレットまとめ

関係あるかも知れない記事

前の記事・次の記事

前の記事
<<
次の記事
>>

この記事のトラックバックURL

http://susu.cc/2011/04/youtube_xhtml10strict-valid.html/trackback

コメントはありません

ごめんなさい、コメントフォームは閉鎖しています。