YouTubeをブログに貼るときの画像のサイズについて

今回は、YouTubeの動画をブログに貼り付けるときの
動画のサイズについて、書いていきたいと思います。

なぜYouTubeの動画サイズの比率は17:14なのか？

YouTubeを動画に貼り付けるには、
「Embed欄にあるobjectタグをそのままコピペすればよい」
ということはネットを検索すれば、いたるところに書いてあります。
（↓のほうで解説サイトを3つ紹介しているので、そちらをご覧ください。）

そして、
動画の表示サイズが大きいので、小さくしたいなどの
サイズの変更についても、「widthとheightの数字を変えればよい」
ということもいろいろなページで解説されています。

ここで疑問に思うのが、
YouTubeのデフォルトのwidth、heightの値が「425x350」であるということです。
この425x350の比率を計算すると、「17:14」となります。

一般的に広く使われている動画や画面のサイズは、「4:3」や「16:9」です。
なぜ中途半端な17:14なのでしょうか？

それは、ブログに貼ったYouTubeには、
画面下に「再生などを行うメニュー部分」が付け加わるから、
であると考えられます。
（この考えが間違っていたら、教えてください。）

サイズを変更するときは17:14を意識するべきか？

では、ブログにYouTubeを貼り付けるときは、この中途半端な17:14を気にして動画サイズを
変更しなければならないのでしょうか。

単純に4:3や16:9ではダメなのでしょうか。

以下の３つのページでは、動画の貼り付け方に加えて、
画面サイズをいろいろ変更してみた場合についても紹介されています。
今回の疑問に対して、いろいろ参考にさせていただきました。

●youtube動画のブログへのはり方（from this is guitar pop!）

●[TIPS] ブログの動画貼り付け（YouTube編）（from Devil☆Channel）

●You Tubeの動画をblogに貼る方法（from 上大岡的音楽生活）

上記のページを見て分かることは、
⇒16:9のサイズにしても、表示は16:9にならない。
⇒動画サイズをタテ長などのサイズにしても、表示比率はそうはならない。

つまり、
「どんなサイズにしても、一定の表示比率(およそ4:3？)に常に保たれて、
　残りの余計な部分はスペースとして扱われてしまう」
ということになります。

逆を言えば、
「サイズ指定の計算が間違っていても、動画の表示がおかしくなることはない」
ということです。

実際にやってみた。

本当にどんなサイズ比率を指定しても、YouTube動画の表示が一定に保たれるのか、
確認をするためのページを以下に作成してみました。

↓↓↓
YouTubeの画像表示サイズの実験のページ
↑↑↑

上記ページでの確認方法です。
(1)YouTubeの動画URLを入力する。
　⇒動画が表示されます。
　⇒水色の部分がYouTubeの表示サイズとして指定されている範囲です。
　⇒ブラウザの画面いっぱいに表示するようにしています。
(2)ブラウザのウィンドウサイズをいろいろ変更してみる。
　⇒水色の範囲がブラウザのウィンドウサイズに合わせて変化すると思います。
　⇒同時に、YouTubeの動画もサイズが変わります。
　⇒ヨコ長、タテ長、小さくしたり、大きくしたりしても、
　　動画の表示サイズが一定の比率を保って表示されることが分かります。
　　つまり、水色の部分は余計な部分となります。

いかがでしょうか。
こんなページをわざわざ作成しなくても良かったのですが、
実際に目で見たほうが良いと思ったので、作ってみました。

上記のページの使い道は、
「ブラウザのウィンドウサイズに合わせて動画が画面いっぱいに表示される」
というの利用して、YouTubeプレーヤーとして使ってみても良いかもしれません。

結論

◆YouTube動画をブログに貼るときは、
　「Embed欄のobjectタグをコピペ」

◆YouTube動画の表示サイズを変更するときは、
　「表示比率は自動で調節されるので、いい加減な数値を設定しても大丈夫」
　（ただし、タテ長やヨコ長にしすぎると、余計な空白スペースができるので、
　　なるべく17:14や4:3に近い数値を設定しましょう。）

　例えば、
　「4:3」なら、320x240、480x360、640x480。
　「17:14」なら、425x350、680x560、765x630。

多くの人はとくに気にする必要はないと思うのですが、
私は気になったので、今回このように調べてみました。

もし、間違っているところがあれば、教えていただけると幸いです。

以上。

---

プログラマー現役続行 (技評SE新書 12)

posted with amazlet on 07.10.10

柴田 芳樹
技術評論社 (2007/09)
売り上げランキング: 10880

おすすめ度の平均:

早速アクション開始！

Amazon.co.jp で詳細を見る

YouTubeはなぜ成功したのか

posted with amazlet on 07.10.10

室田 泰弘
東洋経済新報社 (2007/05/11)
売り上げランキング: 58541

おすすめ度の平均:

YouTube の話はそれだけ?
YouTubeを筆頭にしたネットビジネス2007の入門書
パンピー

Amazon.co.jp で詳細を見る