• 更新:
  • 投稿:
  • カテゴリィ: |

YouTube 動画の「埋め込みコード」

YouTube 動画の新旧「埋め込みコード」
リトルモンスターなら──貼らずには いられない)

YouTube で公開されている動画をブログで紹介したいぜ! ──ブロガ (Blog + er) なら、食欲と同じレベルで湧いてくる欲求ですよね。たぶん。

全ブロガの 98 割は、YouTube が提供する標準の「埋め込みコード」で満足することでしょう。「みんなと一緒」は、この国でも・あの国でも、絶対的な正義なのです。

ところが──、今も昔も、ゆーちゅーぶ先生が教えてくれるコードは、(X)HTML 的に・W3C 的に「よろしくない」。

そこで、以前は下の User Script を利用していました。これを GreasemonkeyScriptish などから使うと、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を有効にする

Google Chrome:Lady Gaga (レディー・ガガ) - YouTube

変換は Perl で

肝心の変換は、Perl スクリプトを自作しました。クリップボードの中身を正規表現で置換する──という単純なツールです。

YouTube の新「埋め込みコード」を XHTML と HTML5 で Valid にする! — Gist

ただ、このスクリプトは iframe 要素から object 要素へ変更しているだけです。object 要素に囲まれたリンクは、別の方法で貼り付けている──。ちょっと面倒ですね!

YouTube から一発で Valid な埋め込みコードをコピーできるユーザ・スクリプトを作ろうかな……。そのうち、たぶん、きっと──。

[2] このページの一番上へ戻る