Blog記事作成の参考に！Youtubeの埋め込みでHD再生とiPhoneで再生時に横画面表示させる方法

2012/11/06　14:51

ブログで記事を作成するときに、Youtubeなどの動画を使って紹介すると、画像だけでは伝わらない分かりやすい内容になることが多いかと思います。

Youtubeの場合、埋め込みタグを使って記事内に表示できますが、通常は低解像度の画質になります。

そこで少しHTMLタグを工夫してあげると、HD画質で再生されるようになったりと便利なTipsがあるので紹介します。

iframeタグを使ってHD画質で再生させる方法

Defaultの埋め込みタグ
<iframe width="幅" height="高さ" src="http://www.youtube.com/embed/ビデオID?rel=0" frameborder="0" allowfullscreen></iframe>
これのURL部分に「&amp;vq=hd720」を追加します。
720pで再生するタグ
<iframe width="幅" height="高さ" src="http://www.youtube.com/embed/ビデオID?rel=0&amp;vq=hd720" frameborder="0" allowfullscreen></iframe>

参考動画： Apple – iPad mini – TV Ad – Piano



http://youtu.be/vM9U70HgLsQ

これでPCで再生する時に720pのHD画質となります。
（Youtubeの仕様変更で使えなくなる場合もあり）

ただ、このままですとiPhoneで再生するときにサイトが重かったり、アプリ内ブラウザでJavaScriptの処理が遅いと再生されない場合があります。
このブログもJavaScriptやBlogger自体が低速回線のため、タップしても再生されなかったりするので、YoutubeのLinkも併記してあります。
また、縦画面の状態ですと小さく表示されるため、横画面にしてあげる必要があります。

iPhoneで再生するときに横画面で表示させる方法

objectタグを使用して、以下の様な記述をします。
<object style="width: 幅px; height: 高さpx;">

<param name="movie" value="http://www.youtube.com/v/ビデオID?feature=player_embedded&amp;fs=1&amp;vq=hd720&amp;showsearch=0&amp;showinfo=0">

<param name="allowScriptAccess" value="always">

<param name="wmode" value="transparent">

<param name="allowFullScreen" value="true">

<embed src="http://www.youtube.com/v/ビデオID?feature=player_embedded&amp;fs=1&amp;vq=hd720&amp;showsearch=0&amp;showinfo=0" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" width="幅" height="高さ"></object>

参考動画：Apple – iPad mini – iMac touch – TV Ad – [Parody]

このようにすると、iPhoneのアプリ内蔵ブラウザでも自動的に横画面になり、再生が終わるともとに戻ります。

※Bloggerで記述すると、それ以降改行するのに<br>タグを追記する必要があります
ただしSafariは大丈夫ですが、アプリによってGUIが崩れてしまう場合があります。

例.普段使ってるTwitterクライアント『TweetList Pro for Twitter』

（個人的にTweetbotよりも使いやすいです）

それで、上記タグの動画を再生すると、このようにパーツが崩れてしまう場合があります。

自動で横画面で再生されて、iframeタグを使ったものより、動画としては問題なく再生されるんですが、一長一短な部分があるため、あまり勧められません。

こちらもYoutubeの仕様変更で使えなくなる可能性もあります。

※iOS 6以降からDefaultでYoutubeアプリが削除されたため、機能しなくなっています

その他のTips

埋め込みプレーヤーの動画を1:30から再生したい場合 1:30を90秒に変換して、URL末尾に &start=90 を追加
埋め込まれた動画のアノテーションを無効にする場合 &iv_load_policy=3 を動画のURLに追加


iPhoneしか所有していないため、Androidの場合はどうなるか分かりません。使用されている方で、どのようになるかコメントなど頂けると幸いです。

個人的な推奨としては、iframeタグでLinkを併記してあげるのが、親切になるかなと思います。

Blogger,Movie,Tips