煤式自動連結器

最近立て続けに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にするブックマークレットまとめ