2008年03月12日

youtubeの埋め込みタグ、そのまま使っていませんか!?

youtubeの埋め込みタグ
なにも考えずにホームページやブログに
はり付けているのではないでしょうか?

そこでAnother HTML-lint gateway
というHTMLチェックサイトでチェックしてみました。
すると、下記のエラーがみつかると思います。
youtube埋め込みタグによるエラー一覧。エラー1:空要素タグは<param />と書くようにしましょう。エラー2:<object> には等価な内容を書くようにしましょう。エラー3:<embed> は Mozilla、MSIE または doti 用のタグです。

この時点での点数は「-10点」でしたがく〜(落胆した顔)
そこでyoutubeの埋め込みタグ

<object width="425" height="355">
<param name="movie" value="http:⁄⁄www.youtube.com/v/test"></param>
<param name="wmode" value="transparent"></param>
<embed src="http:⁄⁄www.youtube.com/v/test"
type="application/x-shockwave-flash"
wmode="transparent" width="425" height="355">
</embed>
</object>

を修正していくことにしましょう。

「空要素タグは <param /> と書くようにしましょう。」という文言。まずは

<param name="movie" value="http:⁄⁄www.youtube.com/v/test"></param>
<param name="wmode" value="transparent"></param>

に注目してください。

「param」というタグは本来<param>〜</param>とは書きません。
<param />とするのです。よって

<param name="movie" value="http:⁄⁄www.youtube.com/v/test"></param>
<param name="wmode" value="transparent"></param>

<param name="movie" value="http:⁄⁄www.youtube.com/v/test" />
<param name="wmode" value="transparent" />

とするのが正解です。

つぎに「<object> には等価な内容を書くようにしましょう。」という文言について。

「object」タグは、「<object data="A" type="B">〜</object>」
というかたちで使います。 まず

<embed src="http:⁄⁄www.youtube.com/v/test" 
type="application/x-shockwave-flash"
wmode="transparent" width="425" height="355">
</embed>

という箇所に注目してください。

「<object data="A" type="B">〜</object>」のAには

「src="http:⁄⁄www.youtube.com/v/test"」の「""」で囲まれた箇所を入力します。

「<object data="A" type="B">〜</object>」のBには

「type="application/x-shockwave-flash"」の「""」で囲まれた箇所を入力します。

そしたら

<embed src="http:⁄⁄www.youtube.com/v/test"  
type="application/x-shockwave-flash"
wmode="transparent" width="425" height="355">
</embed>

という箇所は不要なので削除。

最後に「</object>」の直前にyoutube動画のタイトル名を入力してください。
すると下記のようになったと思います。

<object width="425" height="355" 
data="http:⁄⁄www.youtube.com/v/test"
type="application/x-shockwave-flash">
<param name="movie" value="http:⁄⁄www.youtube.com/v/test" />
<param name="wmode" value="transparent" />youtubeのタイトル名
</object>

このように書き換えるとエラーはなくなります。
修正前は-10点でしたが、修正後は99点になりましたわーい(嬉しい顔)
IE(Internet Explorer )とfirefoxで動作確認済みです。

万が一、上記に修正したことにより
youtubeが閲覧できなくなった場合は
ご連絡をいただけるとありがたいです。

ブログランキングに参加中! 「なるほど」と思ったらクリックで応援してくださいね。
クリックするとブログランキングのページへ飛びます。そうすると
わたしのブログにポイントが加算されます。皆さまの1票が
「応援してくれてる人のために頑張ろう!」という気持ちにさせてくれます。
人気ブログランキング 人気ブログランキング【ブログの殿堂】 ブログランキング・にほんブログ村へ

Google
posted by はっくん at 05:29 | 山口 ☀ | Comment(1) | TrackBack(0) | HTML&CSS
この記事へのコメント
ありがとうございます。(^^)
早速修正いたしました。m(__)m
Posted by Super源さん at 2010年05月22日 21:15
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。