ちょっと直しでブログのYouTube動画サイズを変更する方法

2012年02月20日

ときどき見かけるんですが、
YouTube動画のサイズが記事の横幅より大きくて、
全部入りきれていないブログ。

とっても大きなサイズで貼りつけてあって
なんかページの読み込みまで遅く感じるんですよね。

気のせい？

そこで
ブログに貼りつけたYouTube動画のサイズを、
簡単に変更する方法をご紹介します。

まずはサンプルとして
「Google Search Features」というGoogle公式動画を使います。

見事に右側が入りきっていませんね。^^;

埋め込みコードを確認しよう

先ほどの動画の埋め込みコードはこうなっています。

赤い太文字部分が動画のサイズを表しています。

この場合は
width="560" height="315"
ですから、

横幅が560ピクセルで、
縦が315ピクセル、ということになります。

結局この部分を変更すれば
動画のサイズは変更できちゃうんですね。

横幅を決める

埋め込んだYouTube動画の横幅のサイズは、
任意のサイズに指定できます。

つまりお好きなサイズで、ということです。

では今回は
横幅を300ピクセルに縮めてみましょう。

width="300"と書き直しました。

縦のサイズを求める

横幅は任意のサイズに指定できるんですが、
問題は縦のサイズなんですよね。

テキトーなサイズにしても、
再生上はあまり問題ありません。

でも、できれば元の比率を保ったまま
サイズを変更したいところです。

縦のサイズの計算方法は、
元々の画面比率によって２通りあります。

■【4：3の標準比率の場合】

新横幅：width ＝お好きなサイズ
新縦幅：height ＝新横幅×0.75＋25

■【16：9のワイド比率の場合】

新横幅：width ＝お好きなサイズ
新縦幅：height ＝新横幅×0.5625＋25

今回のサンプル動画はどう見ても16：9のワイド比率ですから、
縦のサイズはこうなります。

新縦幅：height ＝ 300×0.5625＋25
⇒ 193ピクセル（小数点以下切捨て）

埋め込みコードのheightを書き直します。

するとこういう表示になります。

ブログ記事の横幅にしっかり収まりましたネ。

別の埋め込みコードの場合は？

YouTubeの埋め込みコードにはもうひとつ別のものもあります。

こういうタイプのコードですね。

これも基本的には同じで、
２ヶ所ある赤い太文字部分を書き換えるだけです。

なお、
今回ご紹介した縦のサイズの計算式ですが、
すこし簡易的なものなので、

実際のYouTubeサイトでのカスタムサイズとは
微妙に差がありますが、再生には問題ありません。

でわ ^^)/~