Bloggerのモバイルで記事に埋め込んだYouTube動画のサイズを変更する方法

Bloggerブログで記事にYouTube動画を載せるにはウェブの投稿の「動画」から取り込むのが便利だと思う。

YouTubeの自分のチャンネルは直ぐに探せるし、他人のチャンネルは検索からキーワードやURLで埋め込みコードを簡単に取得できる。

サイズが「320×266」で固定されているからタブレットやパソコンでは大きく表示したくなるけど、しかしスマホでもバランスが悪くて変えたくなって来たんだ。

BloggerのデフォルトだとYouTube動画の様々な画面比にきっちり対応できるけれども昨今は16:9の画面比が大半を占めているから完全に合わせてしまった方が良いと思う。

毎回、上下の余りの黒い部分が太過ぎるし、モバイルの記事では最初にサムネイル画像が上下の黒い余りなしに表示されていて実際の動画よりも、可成、大きく膨らんでいる。

デザインとして画面比を16:9の「320×180」に設定するのが望ましい。

モバイルでYouTube動画のサイズをを変更する二つの方法

一つはタブレットやパソコンでやっているのと同じだ。

CSSで最小幅を指定するとバランスを取りながら好きに表示できる。YouTube動画はiframeタグで取り込まれるから画面比が崩れ易くてデバイスの画面幅に合わせたレスポンシブ対応を考えるとHTML編集も必要になって来る。Bloggerでは自動で組み込まれてないから手動で記事毎に修正するのが厄介なので、デバイスの画面幅になるべくはみ出さない程度に最小幅で固定して表示するのが手早い。

追記：2021年の冬頃からはCSSのaspect-ratIo要素を使ってYouTube動画を含めたiframeタグのコンテンツの画面比を多くのブラウザでレスポンシブに指定できるようになった。

レスポンシブ対応ではないからCSSをかける画面幅よりもデバイスが大きくてずれるとYouTube動画の両端に隙間ができてぴったり合わなくなるからタブレットのCSSをどのくらいで大きくして引き継ぐかを考え合わせながら指定するべきだろう。

スマホのモバイルだけだとCSSをYouTubeの横幅の320pxから480pxまでの画面幅にメディアクエリで振り分けて記事のYouTube動画のiframeタグの最小幅を320pxにすると大丈夫だと思う。

CSSでYouTube動画を16:9の画面比で表示するサンプルのソースコード

@media screen and (max-width:480px) and (min-width:320px) {
.post-body iframe {min-width:320px;min-height:180px;}}

注意するとiframeタグは最小丈も指定しないと画面比がデバイスの画面幅に応じてバラバラに変わる。

もう一つはYouTube動画の埋め込みコードのサイズを変える。

Bloggerのウェブの投稿の動画からYouTube動画の埋め込みコードを取り込んだ場合にはサムネイル画像のURLも追加されている。

デフォルトでは「320×266」だけれども動画のサイズも一緒に決まっているので、サムネイル画像のサイズを変えると大丈夫なんだ。

サムネイルでYouTube動画を16:9の画面比で表示するサンプルのソースコード

<iframe width="320" height="180" （中略）></iframe>

YouTube動画のソースコードを記事毎に書き換えなくてはならないからCSSで全てを一辺に変えるよりも手間はかかるけれどもYouTube動画を載せてない記事にも無駄なCSSが追加されずに済むのは有り難い。

些細な日常の記事のYouTube動画はタブレットやパソコンではCSSで最小幅を設定しているけれどもスマホではサムネイルでサイズを設定したいと思う。

ブログに幾らかでも無駄なCSSを増やさなければ表示速度に影響しないし、サムネイル画像をデフォルトよりも小さく取り込むとすると容量が下がって反対に表示速度には有利に働くはずだ。

参考サイト

• YouTube動画のサムネールを取得する