youtube の 埋め込み用 HTML を valid にするブックマークレットまとめ

2010-4-28 01:31
このエントリーをはてなブックマークに追加

youtube の動画を外部サイトに埋め込む際に用いる <object>~ の HTML ですが、これは Valid な HTML(XHTML)になっていません。このような指摘は以前からなされています。

具体的には & がエスケープされていない、param 要素が空要素で表現されていない、embed 要素を使っているなどです。embed 要素はそもそもこれまでの HTML では正式に採用されたことのない独自拡張要素です。

Netscape 4.x や古い IE では Object 要素の実装がおかしいこともあり embed 要素のタグを併記することが行なわれてきましたが、今日ではほぼ不要と思います。(HTML5 では正式に使えるようになる予定ですが現行規格では Invalid.)

もちろん youtube が標準的に提供するコードでも動作はしますが、そもそも IE6 さえ古いブラウザとして締め出している youtube が Netscape 4.x 用に embed タグをわざわざ残しているとしたら変な感じです。やはり Valid な HTML の方が気持ちいいですね。

しかし、毎回手動でコードを修正するのは面倒くさいのでブックマークレットを作ろうかと思いましたが、探したところすでに作成されている方がいらっしゃいましたので3つご紹介します。

僕は見ていた : “YouTube Object Code” を IE6 多応にしました
ブックマークレットの JavaScript のコードでは変換はせずに、スクリプト制作者のサイトにアクセスし、変換されたコードを取得するという方式です。代替内容として Youtube へのリンクを含みます。
YouTubeの埋め込みをXHTML validにするブックマークレット – asotech
ブラウザで新しいウィンドウ(タブ)を開いて、そこにテキストエリアを表示してコードを出力しています。シンプルですが代替内容がありませんので、再生できない場合のリンクを手動で挿入する必要があります。

「YouTube Perfect Embed」YouTubeの貼り付け用コードをXHTML Validでサムネイル付きにするブックマークレット [C!]
スクリプト制作者のサイトにアクセスし、変換されたコードをダイアログボックスを表示します。代替内容としてサムネイル付きのリンクを出力します。リンクに target 属性が付いてしまうため、XHTML1.1 や XHTML1.0 Strict などでは Valid になりません。

すべて Firefox 3.6 で動作しました。いずれも Yutube の動画の再生ページで利用します。それぞれ異なった動作をし、メリット・デメリットがあります。個人的に二番目に紹介した方のスクリプトを改変させていただき代替内容にリンクを挿入するようにして利用しています。以下にそのブックマークレットを掲載しておきます。

Youtube 埋め込み HTML 取得

コメントはまだありません

No comments yet.

Sorry, the comment form is closed at this time.

72 queries. HTML convert time: 1.546 sec. Powered by WordPress. Valid XHTML
Copyright © 2003-2017 @ futuremix.org ログイン