ブログで記事を作成するときに、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部分に「&vq=hd720」を追加します。
720pで再生するタグ
<iframe width="幅" height="高さ" src="http://www.youtube.com/embed/ビデオID?rel=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
参考動画： Apple - iPad mini - TV Ad - Piano
これで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&fs=1&vq=hd720&showsearch=0&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&fs=1&vq=hd720&showsearch=0&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よりも使いやすいです） それで、上記タグの動画を再生すると、このようにパーツが崩れてしまう場合があります。
その他のTips
埋め込みプレーヤーの動画を1:30から再生したい場合 1:30を90秒に変換して、URL末尾に &start=90 を追加 埋め込まれた動画のアノテーションを無効にする場合 &iv_load_policy=3 を動画のURLに追加iPhoneしか所有していないため、Androidの場合はどうなるか分かりません。 使用されている方で、どのようになるかコメントなど頂けると幸いです。 個人的な推奨としては、iframeタグでLinkを併記してあげるのが、親切になるかなと思います。
Newer Post
