アクセス数: | 今日: | 昨日:   記事数:996

HOMESITE MAPBOOKMARKTAG CLOUD

【WordPress】YouTubeの埋め込みコードの正しい書き方

『【WordPress】YouTubeの埋め込みコードの正しい書き方』をはてなブックマーク

YouTubeYouTubeが1080p対応になり盛り上がっております。
『&hd=1』になったのが7月頃なので、4ヶ月ちょっとでまたレベルアップしましたね。

9/24に紹介したYouTubeのコードをXHTMLにするジェネレーターを紹介して以来そのコード形式で書いていましたが、何とこのコードではWPtouchで表示されない事が判明しました。

本来ならこのように表示されます。
WPtouch - YouTube

しかし、XHTMLのコードだと表示されません。
PC表示にしても同じです。
WPtouch - YouTubeiPhone - YouTube

以前紹介したプラグイン『mmyYouTubeHQ』はちゃんと表示されます。
が、いかんせん動画の下に意図しないテキストが入るのであんまり好きくない。
仕方が無いので、元のYouTube自体に書かれている埋め込みコードに戻しました。

現デザインの右上に表示させている動画ですが、今まではYouTubeのお気に入りに入れた動画をRSSで読み込んでいましたが、1記事で書いた動画を表示するようにしました。
記事内の動画と右上の動画のサイズが違うので、少々技(と言うまでもないですが)がいります。

まずYouTubeの埋め込みコード

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/OLeZAGLEzcU&hl=ja_JP&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OLeZAGLEzcU&hl=ja_JP&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

この中に書かれた『width(幅)』と『height(高さ)』を削除。
あと動画のコードも削除します。

『hd=1』と『fmt=37』を付け足す。
(fmt=37 だけで良いかもしれませんが)
<object><param name="movie" value="http://www.youtube.com/v/&hl=ja_JP&fs=1&hd=1&fmt=37"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/&hl=ja_JP&fs=1&hd=1&fmt=37" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"></embed></object>

このコードを『AddQuicktag(過去記事)』で追加します。
これでYouTubeの動画を貼る時はボタン1つで、元動画のアドレス部を●位置に追加すれば表示する事が出来ます。

最後に動画のサイズはCSSで調整します。
記事内のCSS
.entry object,
.entry embed {
  width: 425px;
  height: 344px;
}

サイドのCSS
#sidebar object,
#sidebar embed {
  width: 300px;
  height: 246px;
}

便利な事でも全てに対応してないと、やっぱ使えませんね。
デフォルトが基本って言った所でしょうか。

Trackback URL

リンク先が18禁サイトの場合は削除しています。
当ブログにリンクが貼られていない場合は削除しています。

コメントを書く

必須です。

必須です。(公開されません)
GRAVATARに登録していると、アイコンが表示されます。

リンク先が18禁サイトの場合は削除しています。

以下のタグが利用出来ます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Additional comments powered by BackType