「YouTube Perfect Embed」YouTubeの貼り付け用コードをXHTML Validでサムネイル付きにするブックマークレット

今日は、YouTubeのダウンロード・・・ではなく、外部ブログなどに貼り付けるためのembedタグを綺麗なコードで出力するためのブックマークレットを紹介します。Perfectっていうのはちょっと大げさだと思いますが…、名前に負けないくらい重要な機能を含んでいます。
YouTube標準のEmbedとの違い

• 出力されるHTMLコードがXHTML Validになります
• Objectタグを認識しないブラウザではサムネイル付きのリンクが表示されます

ブックマークレットの設定は、下記リンクをブックマークに保存してください。
・YouTube Perfect Embed

使い方

YouTubeの再生ページ（/watch?v=〜）で、上記ブックマークレットを実行します。
そうすると、下記のようなダイアログに、修正されたEmbedコードが出力されますので、そのままコピーしてご利用ください。

通常はObjectタグが有効なので、普通に動画プレイヤーが表示されます。

特徴的なのはObjectタグが無効な環境、例えばRSSリーダーで見た場合は、

このように、サムネイルとタイトル（YouTubeページへのリンク）を表示します。
続きで、細かい設定や技術的な説明を書いていきます。

XHTML Validにするために、変更されるHTMLコード

YouTubeのEmbedがValidで無いと言うのは、かなり前から言われているネタなんですが、下記エントリーなどを参考にさせていただきました。

• 小粋空間: YouTube の Embed タグを XHTML valid にする
• 小粋空間: YouTube の Embed タグを一発で XHTML valid にする「YouTube -> Valid」
• YouTube better embed for Greasemonkey
• YouTubeの埋め込みコードをXHTML validにするGreaseMonkeyスクリプト – Liner Note
• MT4.2: YouTubeの"embed"をXHTML validに変換するブックマークレット – max engineering.

変換ページや、ブックマークレット／GreaseMonkeyなどで解決する方法があるのですが、徐々に変化しているYouTubeのEmbedコード付いていっているものはないようだったので、現時点での最新コードをもとにValid化しています。
変更前（色が付いているところを削除）

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

変更後（色が付いているところを追加、変更）

<object data="http://www.youtube.com/v/LTOvmmzN5nM?hl=ja_JP&amp;fs=1&amp;hd=1" type="application/x-shockwave-flash"
width="480" height="385">
<param name="movie" value="http://www.youtube.com/v/LTOvmmzN5nM?hl=ja_JP&amp;fs=1&amp;hd=1" />
<param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" />
<div class="yt_embed_block">
<a href="http://www.youtube.com/watch?v=LTOvmmzN5nM" target="_blank" class="yt_embed_thumb">
<img src="http://i.ytimg.com/vi/LTOvmmzN5nM/default.jpg" alt="BoA / Possibility duet with三浦大知" />
</a><br />
<a href="http://www.youtube.com/watch?v=LTOvmmzN5nM" target="_blank" class="yt_embed_title">
BoA / Possibility duet with三浦大知
</a>
</div>
</object>

HTMLコードの変換ポイント

1. embed 要素の src 属性値を取得し、一つ目の「&」は「?」に、それ以降の「&」は「&」に変換
2. object 要素に data 属性を追加し、属性値に 1 の src 属性値を記述
3. object 要素に type 属性を追加し、属性値に embed 要素の type 属性値（application/x-shockwave-flash）を記述
4. name属性値が movie の param 要素の value属性に、1 の src 属性値を記述
5. param 要素の終了タグを削除し、開始タグを空要素タグ（末尾に ” /” を付与）に変更
6. embed 要素を削除して、div 要素で囲ったサムネイル＋タイトルを表示

§

YouTube動画のサムネイルを表示する

YouTube動画には標準で3枚のサムネイル画像が用意されており、video_idが特定できればURLを特定できます。
via: YouTubeのサムネイル画像 (Yusukebe::Tech)
上記だと、ドメイン部分がちょっと古いので、今のバージョンでは、

http://in.ytimg.com/vi/LTOvmmzN5nM/default.jpg
http://in.ytimg.com/vi/LTOvmmzN5nM/1.jpg
http://in.ytimg.com/vi/LTOvmmzN5nM/2.jpg
http://in.ytimg.com/vi/LTOvmmzN5nM/3.jpg

こんな感じになります。
default.jpgは動画一覧などで表示されるサムネイルですが、1〜3のどれかの画像と同一のもので、アップロードしたユーザー自身が選択することができます。また、i1.ytimg.com や i2.ytimg.com などは、i.ytimg.com のキャッシュサーバーになっているようで、同じ画像が表示されます（負荷分散のため数字がバラけて表示されると思います）。ブックマークレットでは i.ytimg.com を使用するようにしています。
ブックマークレットでは、標準でdefault.jpgを使ってサムネイル表示します。

<div class="yt_embed_block">
<a href="http://www.youtube.com/watch?v=LTOvmmzN5nM" target="_blank" class="yt_embed_thumb">
<img src="http://i.ytimg.com/vi/LTOvmmzN5nM/default.jpg" alt="BoA / Possibility duet with三浦大知" />
</a><br />
<a href="http://www.youtube.com/watch?v=LTOvmmzN5nM" target="_blank" class="yt_embed_title">
BoA / Possibility duet with三浦大知
</a>
</div>

ただし、ブックマークレットに「thumb」パラメータを追加することで、出力されるサムネイルの数を制御できます。

• thumb=0：サムネイルを表示しない
• thumb=1：サムネイルを1つ表示する（デフォルト）
• thumb=2：サムネイルを2つ表示する
• thumb=3：サムネイルを3つ表示する

サムネイルを３つ表示したい場合のブックマークレットはこのようになります。

javascript:(function(){var d=document,s=d.createElement('script');s.charset='UTF-8';s.src='http://labs.creazy.net/bookmarklet/youtube_valid_thumb_embed.php?v=1&thumb=3';d.getElementsByTagName('head')[0].appendChild(s);})();

また、ここまで書いてきたのはあくまでOjbectタグが無効な環境での話ですが、Flashの動画プレイヤーでなく常にサムネイルで表示したいという場合は、「force_thumb」パラメータを使う事もできます。

• force_thumb=1：常にサムネイル表示する
• force_thumb=0：通常のObjectタグを出力する（デフォルト）

動画プレイヤーを表示せず、常にサムネイルを３つ表示したい場合のブックマークレットはこのようになります。

javascript:(function(){var d=document,s=d.createElement('script');s.charset='UTF-8';s.src='http://labs.creazy.net/bookmarklet/youtube_valid_thumb_embed.php?v=1&thumb=3&force_thumb=1';d.getElementsByTagName('head')[0].appendChild(s);})();

§

まとめ

Objectタグが無効な環境での動作確認として、livedoor ReaderとGoogle Readerでの動作確認は行いましたが、他の環境なので問題ありましたらお知らせ下さい。また、そもそもValidなコードじゃないとか、ツッコミありましたら歓迎いたします。
もし、このブックマークレットの評判が良ければYouTube HD Suiteへの組み込みなども検討しています。ご意見くださいませ。