XHTML 1.0 StrictでYoutubeの埋め込みタグをValidにする
自分のホームページにYoutubeを埋め込むとき、Ｗ３ＣのチェッカーでValidがでずに色々試行錯誤することになったので、忘れないためのメモ書きとしてここに残す。
そもそも、HTML 5にさえなってしまえばYoutubeの埋め込みコードである「iframe」が準拠となるためこんな厄介なことをする必要はないのだが、とりあえずXHTML 1.0 Strictで準拠させる方法を以下に解説する。
●結論から。
- <p>
- <object data="http://www.youtube.com/v/wXTcV0F4Dm0?rel=0" type="application/x-shockwave-flash" width="420" height="315">
- <param name="movie" value="http://www.youtube.com/v/wXTcV0F4Dm0?rel=0" />
- <param name="wmode" value="transparent" />
- </object>
- </p>
赤字の部分を適宜変更してください
こんな感じになります↓
●解説。
まず、Youtubeの動画をホームページに埋め込むタグの取得方法についてですが、これは他のサイトにいくらでも情報があるのでググってください。
２０１２年１１月現在、埋め込みタグは２種類がYoutube側で用意されています。
一つ目は「iframe」タグを利用した以下のようなもの。
- <iframe width="420" height="315" src="http://www.youtube.com/embed/wXTcV0F4Dm0"
frameborder="0" allowfullscreen></iframe>
「iframe」タグ自体を非推奨タグとしないHTML 5などなら、これを埋め込みすれば問題ありません。（問題があるとすれば、frameborder属性の設定だけＣＳＳのほうに持っていく必要くらい。）
ただし、XHTML 1.0 Strictを宣言しているこのakotaiのようなページでは、「iframe」タグ自体が非推奨であり、Ｗ３Ｃのチェッカーではinvalidだと一蹴されます。
そこで、もう一つの埋め込みタグを引っ張ってみます。Youtubeの埋め込みコードを取得する画面で「以前の埋め込みコードを利用する」にチェックをいれると、以下のようなコードに変わります。
- <object width="420" height="315">
- <param name="movie" value="http://www.youtube.com/v/wXTcV0F4Dm0?version=3&hl=ja_JP"></param>
- <param name="allowFullScreen" value="true"></param>
- <param name="allowscriptaccess" value="always"></param>
- <embed src="http://www.youtube.com/v/wXTcV0F4Dm0?version=3&hl=ja_JP" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
- </object>
で、このソースで埋め込みをしてみるのですが、今度は「embed」タグが非推奨。
そもそも「embed」タグっていうのは出来の悪いブラウザとして有名なInternet Explolerでしか認められていないとか。
というわけで、いろいろと試行錯誤した結果、「embed」タグをはずして「object」内にdata属性としてurlを記載。
ちなみに、このurlは「http://www.youtube.com/v/なんちゃら」という書き方をしないとうまく表示されないです。
しかも「param」タグは「br」なんかと一緒で、「</param>」という閉じ方はせずに、「<param なんちゃら />」という閉じ方をしないとinvalidです。
その他いろいろと「これはなくてもいいかなー」という設定をはずして、綺麗にしたのが当初のソースです。
●使い方まとめ。
というわけで、使い方をまとめると、
１．Youtubeで貼り付けをしたい動画を探す。
２．いちおう、埋め込みコードを取得してみる（縦・横の大きさを知るためと、個々の動画の乱数部分を取得するため）。
３．上記のソースの赤字部分をコピペ、縦・横の大きさと、個々の動画の乱数部分を置き換える。
４．アップロードしてチェックしてみる。以上。