YouTube 動画の「埋め込みコード」
（リトルモンスターなら──貼らずには いられない）
YouTube で公開されている動画をブログで紹介したいぜ！ ──ブロガ (Blog + er) なら、食欲と同じレベルで湧いてくる欲求ですよね。たぶん。
全ブロガの 98 割は、YouTube が提供する標準の「埋め込みコード」で満足することでしょう。「みんなと一緒」は、この国でも・あの国でも、絶対的な正義なのです。
ところが──、今も昔も、ゆーちゅーぶ先生が教えてくれるコードは、(X)HTML 的に・W3C 的に「よろしくない」。
そこで、以前は下の User Script を利用していました。これを Greasemonkey や Scriptish などから使うと、Valid な HTML コードを出してくれます。
Valid YouTube Embed for Greasemonkey
しかし、現在のユーチューブは仕様が変更されました。
このスクリプトを使うには、わざわざ以前の埋め込みコードを使用する
という項目にチェックを入れる必要があります。──この記事の上にある画像を参照してくださいね。
その上、ユーザ・スクリプトを利用しても、それほどクリーンなコードでもない……。
今回は、イイ感じに埋め込みコードを変更する方法──のヒントを紹介します。ちょっと歯切れが悪いのは、続きを読んでの お楽しみ……。
現在の埋め込みコード
まずは現状のコードを確認してみましょう。レディー・ガガ様の動画を例に挙げてみました。
Google Chrome：Lady Gaga （レディー・ガガ） – YouTube
標準の埋め込みコードは、下のとおりです。
<iframe width="560" height="315" src="http://www.youtube.com/embed/XN-_eXcKMTA" frameborder="0" allowfullscreen></iframe>
XHTML 1.0 strict や HTML5 で書かれた HTML ソースに、このコードを そのまま貼り付けると、強調した部分が原因で、各種バリデーション・サービスに怒られてしまう──。
自分の場合は、次のようなコードに変更してから、記事に貼り付けるようにしています。
<p>
<object width="560" height="315" data="http://www.youtube.com/embed/XN-_eXcKMTA?wmode=transparent" type="text/html">
<a href="http://www.youtube.com/watch?v=XN-_eXcKMTA" title="Google Chrome：Lady Gaga （レディー・ガガ） - YouTube">Google Chrome：Lady Gaga （レディー・ガガ） - YouTube</a>
</object>
</p>
下の記事を参考にしました。感謝！
WebTecNote – YouTubeのiframe版埋め込みコードでもwmodeを有効にする
変換は Perl で
肝心の変換は、Perl スクリプトを自作しました。クリップボードの中身を正規表現で置換する──という単純なツールです。
YouTube の新「埋め込みコード」を XHTML と HTML5 で Valid にする！ — Gist
ただ、このスクリプトは iframe 要素から object 要素へ変更しているだけです。object 要素に囲まれたリンクは、別の方法で貼り付けている──。ちょっと面倒ですね！
YouTube から一発で Valid な埋め込みコードをコピーできるユーザ・スクリプトを作ろうかな……。そのうち、たぶん、きっと──。