あなたのブログの動画はスマートフォンではみ出してるかもしれない

パソコンで書いているとやっぱりパソコンの見た目に集中してしまいます。スマホはパソコンと比べたらめっちゃ画面小さいんやで！ というのを忘れてしまう。というわけで対処法についてです。

サンプル

1. スマホではみ出す
2. スマホではみ出さないが縦横比が崩れる ▲
3. スマホではみ出さず縦横比も崩れない

以下がパソコン閲覧時の3パターンのスクリーンショットです。width属性の値は 560、height属性の値は 360を指定しています。

続いて以下がスマホ閲覧時の3パターンのスクリーンショットです。

こうして見た目に差が出るのは何故かというと、CSS内容に依存 するからです。サンプルのようにYouTubeを例に取ると、埋め込みコードを取得して何も処理せずに記事に貼り付けた場合、私のテンプレートのデフォルトは ② の「はみ出しはしないが縦横比が崩れる」という状態になります。当然ですが レスポンシブ設定を済ませ、スマホでも私のテンプレートが表示される状態になっている というのが大前提です。つまりスマートフォン専用版を利用していない場合ということですね。

PCで私のテンプレートを利用している・いないに関わらず、スマートフォン専用版を利用しているという場合には ① の「画面幅から完全にはみ出す」という状態に陥っている方が圧倒的に多いです。もちろん使用しているテンプレートの製作者がどうコーディングしているかによりますが、公式デフォルトのスマホテンプレートは ① の状態になり、スクロールする度に画面が右へ左へ揺さぶられます。あるいはテンプレートによっては画面は揺れずとも動画の右半分が完全に画面外に隠れて見ることができなくなっているかのいずれかです。

動画はみ出しの対処

まずhtmlですが、① と ② は共通です。③ のコードについては後ほどまとめて説明します。

動画サービスから取得してきたiframe要素を貼り付けます。(サービスによってはiframeではない場合もありますが今回は割愛します)

<iframe width="560" height="315" src="動画アドレス" allow="autoplay; encrypted-media" allowfullscreen></iframe>

そしてCSSに

iframe {
  max-width: 100%;
}

これが書いてあるかどうか です。書いて無ければ ① に、書いてあれば ② になります。

③ のような最適な状態にするにはhtmlにもCSSにも一工夫必要です。

<div class="xxx" style="max-width: 動画最大横幅px">
<iframe width="560" height="315" src="動画アドレス" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

xxx は任意文字列です。動画をいかなる画面サイズでもはみ出させず、かつ縦横比を守らせるにはiframe要素だけでは実現できません。そこでiframe要素をdiv要素で囲います。

.xxx {
  position: relative;
  width: 100%;
}

.xxx::before {
  content:"";
  display: block;
  padding-top: 56.25%;
}

.xxx iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

上記がCSS内容です。一応説明をすると、クラス名 xxx を持つ親であるdiv要素のheight(高さ)は初期状態ではauto値です。つまり高さ未定。子要素の大きさいかんで縦幅が決まります。親のdiv要素に与えられたbefore疑似要素に padding-top が指定されていますが、marginやpaddingのパーセンテージ指定というのは親要素の横幅を基準に算出されます。つまりここでの padding-top: 56.25% というのは、親のdiv要素の横幅の56.25%ということですね。

この数値はいわゆる 黄金比 で、16:9 となります。before疑似要素の横サイズはdisplayプロパティのblock値のデフォルトである100%、縦サイズはpadding-topの働きにより横幅の56.25%になっています。そしてこの疑似要素は親要素の一番最初の子要素となりますので、クラス名 xxx を持つ親要素はこの子となるbefore疑似要素に広げられて高さが自身の横幅の56.25%となります。これで 横:縦 が 16:9 を常に維持するボックスが完成します。そのボックス内にiframe要素を親の大きさに対し縦横100%、つまり親と同じ横幅と同じ縦幅を指定してabsoluteで絶対配置を行えば、iframe要素は常に同じ比率を維持できるというわけです。このあたりの仕組みの理屈は難しいので興味のある方だけどうぞ(最初に言えば良かったが)

私のテンプレートをご利用中の方は既にこのレスポンシブ動画用のCSSが記載されています。サンプルhtmlのクラス名 xxx の部分に box-for-video を指定すればCSSの追加は行わずにレスポンシブ動画になりますので是非ご利用ください。

まとめ

動画に限ったことではありませんが、「スマートフォンで何かがはみ出してるかもしれない」と意識しながら記事を書くことは大事だと思います。今はパソコン閲覧よりもスマートフォン閲覧の方が多い時代なので当たり前。

CSS追加に関して、スマホ版を使用している方はそのスマホ版の方に記述しないと意味がありませんので注意してください。私のテンプレートをお使いの方でレスポンシブ設定を済ませている方はこの件について特に何かする必要はありません。過去に掲載した動画も画面内に収まるようになっているはずです。強いて言えば新規投稿分についてレスポンシブ動画指定の独自クラスを採用するかどうかご検討を。

スマホ実機を所有していなくてもURL末尾に ?sp を追加すればスマホでの見た目を確認できるわけですから、怠らずしっかり確認されることをおすすめします。