大きな画面のYouTube動画をブログに貼る方法

※今回紹介する方法は、このブログを書いた時点でのみんカラ及びYouTubeの仕様の話となります。みんカラ及びYouTubeのサービスの仕様はある日突然変わることがありますので、今後仕様が変わった際、ここに書いた事が通用しなくなる可能性もありますのでご注意下さい。また、今回のブログはFlash Playerが利用できるブラウザでご覧下さい。パソコンでの閲覧を推奨。

みんカラのブログでは、ブログ内にYouTubeの動画を貼り付ける機能があります。詳細はこちら。
https://minkara.carview.co.jp/userid/344098/blog/14699108/

以前私がYouTubeにアップロードした「第4回エイト祭　RX-8 GP 決勝」の動画をサンプルとして使います。URLはこちら。
http://www.youtube.com/watch?v=UEfRpR5E6IA

みんカラブログの動画ボタンを押すと、このようなタグがブログ本文に自動的に入力されます。


これをプレビューするとこうなります。



ブログ本文に無事動画が埋め込まれましたが、プレイヤーのサイズが小さいです。そして、ソース元の動画の縦横のアスペクト比が16:9と横長なので、プレイヤーの縦横比に合わせる為、映像部分の上下に黒帯が着いてしまって更に映像が縮小されてしまって見づらいです。埋め込みプレーヤーのサイズを出来る限り大きくし、黒帯が表示されないサイズを探します。みんカラのブログコンテンツのスタイルシートの横幅サイズは580pxですので、横幅は580pxで決まり。次に、上下・左右に黒帯が表示されない縦幅を探すと、縦幅356pxで黒帯が出なくなりました。作成されたタグの数値をこの数値に書き換えると、


これをプレビューするとこうなります。



映像が大分大きくなって見やすくなりました。横幅580・縦幅356という数値は、元の動画のアスペクト比が16:9の場合でして、4:3の動画の場合は、横幅580・縦幅436という数値になります。今度のサンプル動画は、「東方輝針城　体験版　Normal ノーミス3面クリア　霊夢A」。アスペクト比4:3です。URLはこちら。
http://www.youtube.com/watch?v=ZxBU59EQhjU

・修正前




・修正後 (横幅580・縦幅436)




アスペクト比16:9と4:3、両方ともサイズ調整が上手くいきましたが、もうちょっと改善します。ブログに埋め込んだプレイヤーで再生すると、高画質の720pや1080pで再生可能な動画でも360pで再生されてしまいます。高画質で再生するにはユーザーが歯車のマークを押して手動で画質を変更する必要がありますが、下記のように埋め込みコードを記述すると、こちらが指定の画質モードで最初から再生させる事が可能になります。ただし、元の動画が対応している画質モードに限ります。

・720pで再生




・1080pで再生



これで任意の画質モードで再生できるようになりました。なお、URLをクリックしてYouTubeリンク先に飛んだ際に720pで再生させる場合は、URLの動画IDの後ろに?hd=1をつけることで可能です。

http://www.youtube.com/watch?v=ZxBU59EQhjU?hd=1
→ http://www.youtube.com/watch?v=ZxBU59EQhjU?hd=1

YouTube公式短縮URL　http://youtu.be/ZxBU59EQhjU?hd=1
→ http://youtu.be/ZxBU59EQhjU?hd=1

1080pで再生については、やり方が確立されていない模様。


以上の事をまとめて下記にテンプレートを用意しましたので、コピペしてお使い下さい。★は利用する動画IDに置き換えてください。

http://www.youtube.com/watch?v=ZxBU59EQhjU
↑の動画だと、ZxBU59EQhjUの部分が動画IDに該当します

■アスペクト比16:9の動画をみんカラのブログに埋め込む場合

・再生する画質を指定しない

・720pで再生

・1080pで再生


■アスペクト比4:3の動画をみんカラのブログに埋め込む場合

・再生する画質を指定しない

・720pで再生

・1080pで再生


■リンク先のYouTubeの動画を720pで再生する
http://www.youtube.com/watch?v=★?hd=1
http://youtu.be/★?hd=1


皆さんの参考になれば幸いです。長くなりましたが、ご視聴ありがとうございました。