ホーム > iphone , movabletype , ソフトウェアとlifehack > youtubeの埋め込みをXHTML Validに。かつHTML5対応でIpadやIphoneでも表示させる。

< 前の記事 | メインページ | 次の記事>

youtubeの埋め込みをXHTML Validに。かつHTML5対応でIpadやIphoneでも表示させる。

僕のBlogは無駄に(?)Validatorチェックを通すのをポリシーに作っているが故に、youtubeの埋め込みコードを、せっせとEmbedタグをobjectタグに直して使っていましたが、、、それだとiphoneやipadではobjectタグの代替テキストが表示されるだけになってしまいます。

でもサムネイルはやっぱり出てほしい。。ということで、、ちょいと調べましたところ、いくつかxhtml1できれいに埋め込むブックマークレットはあったものの、いまいち、、、、

ということで、思い切ってyoutube html5。あたりでググってみたところ。ありました。

HTML5 に対応した Youtube 動画を貼る方法

情報いただきます。ありがとうございますっ

iframeを使います。

今後はこれをお手本に貼り付けようかと思いますので自分用にメモ。

<iframe class="youtube-player" src="http://www.youtube.com/embed/NdBptlmu7kA" title="a BMW motorcycle story- WITH RIGHTS APPROVAL NOW! " width="480" frameborder="0" height="385"></iframe>

基本的に、書き換えるところは、src=のURLのところと、title=のところ。場合によってはwidthと heightでしょうか。

あと、これは一回やればOKですが、CSSに以下を足しておきます。

.youtube-player {
border: none;
}

するってーと。こうなりました。いぇい。

photo

で。

まだまだがんばっております。

Valid XHTML 1.0 Transitional

正当なCSSです!

[Valid Atom 1.0]

[Check result of Another HTML-lint]

youtubeを埋め込むときの過去の記事

2011年1月23日 tetsu | このエントリーを含むはてなブックマーク | Tweet this icon

[あとで読む]
About..もちこらむ
  • 1)柴犬・富士山と、家族の件
  • 2)吾唯足知といいつつ物欲と戦う
  • 3)自分用の覚書メモ
  • 4)コンピュータとインターネット
  • 5)カメラとビデオ
  • 6)工作その他
  • 7)なぜか月
  • というblog。
Flickr Pickup
Categories
Feed
Tags
Archives
Moon
  • moon
Bookmarks
Count
  • nakanohito
Meta
Twitter
Powered by
Ad