YouTubeのコンテンツをウェブページに張り付ける場合
youtubeで発行されるタグをhtml編集時にコピーしますが、
通常のタグを張り付けただけでは、
動画の解像度が荒い、にじんだ画像になってしまうことが多いのです。
これはYoutubeの動画をより細い回線でも情報が途切れずにダウンロードし
スムーズに再生するために、解像度が小さく、データ量を抑えた形式で
配信する設定になっているからです。
再生コントロールバーの右端にある画質ゲージをみると「360P」になっていませんか?
動画マニュアルのムービーはぼやけたりさせないために、
高解像度で再生してもらうようにしなければいけません。
閲覧する方にYouTubeのコントロールバーで
画質を720P(HD)に変更を行っていただく必要があります。
しかし、閲覧する側にしたら、こんなお願いを毎回行うのも不便ですし、
毎回このような操作を行ってくれるとは限りません。
そこで…..自動的に高解像度で表示させる方法として2つの方法をご紹介します
1:URLリンクをクリックして、YouTube内で自動的に高解像度で再生させる方法
動画の共有リンクで高解像度再生で共有する 動画マニュアルより 再生時間33秒
Youtubeの動画urlで共有をクリックし、オプションで「高解像度」を選択します。
普通の共有URLでは
http://youtu.be/7HglRWBug7A ですが
高解像度オプションをチェックすると
http://youtu.be/7HglRWBug7A?hd=1
になります。*比べてみてください
高解像度オプションが見当たらない場合(IE8,9などのYOUTUBE)
共有urlの最後に「?hd=1」を追加します。
短縮しないurlの場合、最後に「&hd=1」を付けると
高解像度で再生するYouTubeページになります。
2:ウェブページに張り付ける場合
通常の貼り付けは以下の通り
http://www.dougamanual.com/blog/263/1496/e7333.html
埋め込みコードをコピー貼り付けすればウェブページで
動画を埋め込みできますが、
高解像度にして張り付けるには
<iframe width="480" height="360" src="http://www.youtube.com/embed/7HglRWBug7A" frameborder="0" allowfullscreen></iframe>
のYouTubeのアドレスの最後に以下のパラメータを張り付けます
&rel=0&vq=hd720
&vq=hd720
高解像度に指定します。この場合HD720に自動的に解像度を上げますが、画質が720に満たない解像度の場合でも動画本来の最高の解像度にして再生してくれます。
&rel=0
動画の再生終了後に関連動画の表示を行いません。
<iframe ... src="http://www.youtube.com/embed/7HglRWBug7A&rel=0&vq=hd720" ......>
というようになります。
このように埋め込みができればOKです。
*埋め込みタグでうまく再生しない場合は【以前の埋め込みコード】を使用します。その場合YoutubeのURLは2か所に記載がありますので、パラメータも2か所に挿入します。
*パラメータは2012年12月現在有効ですが、今後変更がある場合もあります。
追記:2014年8月 埋め込みコードの最新情報はこちらに掲載しました。
ブログ、ホームページにYouTubeを埋め込むための 覚えておくべきタグ