ときどき見かけるんですが、
YouTube動画のサイズが記事の横幅より大きくて、
全部入りきれていないブログ。
とっても大きなサイズで貼りつけてあって
なんかページの読み込みまで遅く感じるんですよね。
気のせい?
そこで
ブログに貼りつけたYouTube動画のサイズを、
簡単に変更する方法をご紹介します。
まずはサンプルとして
「Google Search Features」というGoogle公式動画を使います。
見事に右側が入りきっていませんね。^^;
埋め込みコードを確認しよう
先ほどの動画の埋め込みコードはこうなっています。
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/y3ao7QXMhC4?rel=0" frameborder="0" allowfullscreen></iframe>
赤い太文字部分が動画のサイズを表しています。
この場合は
width="560" height="315"
ですから、
横幅が560ピクセルで、
縦が315ピクセル、ということになります。
結局この部分を変更すれば
動画のサイズは変更できちゃうんですね。
横幅を決める
埋め込んだYouTube動画の横幅のサイズは、
任意のサイズに指定できます。
つまりお好きなサイズで、ということです。
では今回は
横幅を300ピクセルに縮めてみましょう。
<iframe width="300" height="???" src="https://www.youtube-nocookie.com/embed/y3ao7QXMhC4?rel=0" frameborder="0" allowfullscreen></iframe>
width="300"と書き直しました。
縦のサイズを求める
横幅は任意のサイズに指定できるんですが、
問題は縦のサイズなんですよね。
テキトーなサイズにしても、
再生上はあまり問題ありません。
でも、できれば元の比率を保ったまま
サイズを変更したいところです。
縦のサイズの計算方法は、
元々の画面比率によって2通りあります。
■【4:3の標準比率の場合】
新横幅:width = お好きなサイズ
新縦幅:height = 新横幅×0.75+25
■【16:9のワイド比率の場合】
新横幅:width = お好きなサイズ
新縦幅:height = 新横幅×0.5625+25
今回のサンプル動画はどう見ても16:9のワイド比率ですから、
縦のサイズはこうなります。
新縦幅:height = 300×0.5625+25
⇒ 193ピクセル(小数点以下切捨て)
埋め込みコードのheightを書き直します。
<iframe width="300" height="193" src="https://www.youtube-nocookie.com/embed/y3ao7QXMhC4?rel=0" frameborder="0" allowfullscreen></iframe>
するとこういう表示になります。
ブログ記事の横幅にしっかり収まりましたネ。
別の埋め込みコードの場合は?
YouTubeの埋め込みコードにはもうひとつ別のものもあります。
<object width="560" height="315"><param name="movie" value="https://www.youtube-nocookie.com/v/y3ao7QXMhC4?version=3&hl=ja_JP&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="https://www.youtube-nocookie.com/v/y3ao7QXMhC4?version=3&hl=ja_JP&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
こういうタイプのコードですね。
これも基本的には同じで、
2ヶ所ある赤い太文字部分を書き換えるだけです。
なお、
今回ご紹介した縦のサイズの計算式ですが、
すこし簡易的なものなので、
実際のYouTubeサイトでのカスタムサイズとは
微妙に差がありますが、再生には問題ありません。
でわ ^^)/~