2008年08月31日 10:48

memo:YouTubeコードをxhtml Validに補正する

参照情報は次の通り。

先のエントリでYouTubeの動画をエントリに突っ込んだわけですが、以前にもあったようにtidy君がしっかりチェックして「おまえさんが書いたコードはXHTMLに照らしてエラーだぜ！」と文句をいって、結果的に何をしてくれるかというとヘッダ部分の宣言部分を削除してしまいます。これはこれで困ってしまうので、手作業でヘッダの宣言部分を追記したりしました。対処療法ですね。

そもそもなんでエラーになっているのかわかっていませんでした。「XHTML定義にはembedタグが含まれていないにもかかわらず、YouTubeが吐き出すコードにはembedタグが含まれている為、validとはいえない。」という事になります。そもそもそれすらわかっていなかったのが情けないところですね。そこで調べてみると、embedタグはobjectタグにて置き換えるべし。という記述があります。YouTubeホームページの埋め込みコードは、

<object width="425" height="344">
　　<param name="movie" value="http://www.youtube.com/v/OMlMjpyErI4&hl=ja&fs=1&rel=0"></param>
　　<param name="allowFullScreen" value="true"></param>
　　<embed src="http://www.youtube.com/v/OMlMjpyErI4&hl=ja&fs=1&rel=0" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344"></embed>
　　</object>

というようなコードが提供されます。embedタグがどうのこうの言う前に、「&」がそのままなのがいけません。「&amp;」と記述し直さなければなりませんね。

paramは空要素になりますのでこれもいけない事になります。「<param〜></param>」は「<param〜 />」としましょう。

続いて問題のembedタグの取り扱いですが、會澤が補正したコードを先に示します。

<object width="425" height="344" type="application/x-shockwave-flash" data="http://www.youtube.com/v/OMlMjpyErI4&amp;hl=ja&amp;fs=1&amp;rel=0">
　　<param name="movie" value="http://www.youtube.com/v/OMlMjpyErI4&amp;hl=ja&amp;fs=1&amp;rel=0" />
　　<param name="allowFullScreen" value="true" />
　　<!-- embedタグは削除 -->
　　<a href="http://jp.youtube.com/watch?v=OMlMjpyErI4">YouTube - Baby! Baby! Baby! TVCM30秒 version</a>
　　</object>

赤字が修正部分です。

objectタグにtype/data両属性を追加します。type属性には旧embedのtype属性を、data属性には旧embedのsrc属性を指定します。ちなみに2つめのparamは、動作に支障がないオプションですので省略可能です。また、アドレス部分の「&」以下は表示オプションになりますので実は削除しても良いはずです。

私は、1つめのparamでデータのアドレスを指し示しているのだから、objectタグにはdata属性が必要ないと思っておりまして、type属性のみを記述し、データロードに失敗するのを不思議に思っていました。思い込みというのは恐ろしいものです。表示は可能になったはずです。

で、objectタグには等価な内容を書くべし。という約束事がありますので、ムービータイトルなどを書き込んでやればいいと思います。上記例では、YouTubeホームページへのリンクを入れています。objectタグ未対応のブラウザの場合はこちらが表示される事になるはずです。

YouTube - Baby! Baby! Baby! TVCM30秒 version

自身への覚え書きも含めてのエントリでした。さて、會澤の認識はこれで間違っていないでしょうか。


Posted by kaizawa | TrackBacks
Loading...

©Kenichi Aizawa