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

2012年02月20日


ときどき見かけるんですが、
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サイトでのカスタムサイズとは
微妙に差がありますが、再生には問題ありません。


でわ ^^)/~

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。