第6回 Tips3 YouTubeの埋め込みコードをValidにしたい | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて

Tips 3 YouTubeの埋め込みコードをValidにしたい Tool
>> point 自動的にコードが生成されるので簡単
>> point 画面のサイズは自由な指定が可能



Webサイトで記事を書く際に、YouTubeの動画を引用して埋め込む機会はよくあるだろう。その際に「YouTube」のサイトで用意されている「埋め込み」のコード【1】を使うのがいちばん手軽な方法だ。ただ、このコード【2】は半角の「&」やXHTMLで定義されていないembed要素を含んでいるため、これを挿入したXHTML文書を「Markup Validation Service」でバリデートするとInvalidになってしまう【3】。

YouTubeのサイトで用意されている「埋め込み」のコード
【1】YouTubeのサイトで用意されている「埋め込み」のコード

 

半角の「&」やembed要素が使用されている

【2】半角の「&」やembed要素が使用されている

 

「Markup Validation Service 」でチェックするとInvalidになった

【3】「Markup Validation Service 」でチェックするとInvalidになった


そこで使うと便利なWebサービスが「Valid XHTML YouTube embed code generator」だ【4】。


「Valid XHTML YouTube embed code generator」の画面

【4】「Valid XHTML YouTube embed code generator」の画面



「YouTube embed code or URL: 」のテキストエリアに動画URLか埋め込みコードをペーストし、サイズを指定したい場合には、「Width:」と「Height:」の欄に希望の数値を入力する。縦横比率を変えたくない場合には、どちらかひとつの数値を入れてもう片方は空欄にしておくとよい。[Generate code]をクリックすると、object要素を使ったコードが生成される【5】ので、自分の記事の中でdiv要素の中にペーストすれば完成だ。


生成されたコード

【5】生成されたコード

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在