スキップしてメイン コンテンツに移動

些細な日常

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を増やさなければ表示速度に影響しないし、サムネイル画像をデフォルトよりも小さく取り込むとすると容量が下がって反対に表示速度には有利に働くはずだ。

参考サイト

コメント

最近の投稿

日付: 

Bardの事実認識の2023年9月の更新の実力の確認

イメージ

人気の投稿

宜保愛子は本物の霊能力者だと考えられる三つの真実

イメージ

昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...

平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない

イメージ

日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...

伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える

イメージ

プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...