【CSS】動画埋め込み時にaspect-ratioで縦横比を保つ方法（レスポンシブ対応）

【CSS】動画埋め込み時にaspect-ratioで縦横比を保つ方法

サイトに動画を埋め込むときに縦横比を保つレスポンシブ対応のやり方です。以前はpadding-topに56.25%を指定するのが主流でした。今はアスペクト比を直接指定するというシンプルな方法で実現できます。

目次

動画埋め込み時に縦横比を保つサンプル

ブラウザ幅を変えても親要素の幅いっぱいに広がり、かつ縦横比が保たれています。

（音声無し動画です）

コードはこちら

<!-- 動画を置く場合 -->
<video src="sample-video.mp4" class="video"></video>

<!-- youtube動画埋め込みの場合 -->
<iframe src="youtubeの埋め込みURL" class="video"></iframe>

.video {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* 動画のアスペクト比を指定 */
}

【ざっくり解説】動画埋め込み時に縦横比を保つ方法

以前のやり方

以前は親要素にpadding-top:56.25%（比率16:9の場合）を指定して、videoタグやiframeタグをabsoluteで絶対配置するというやり方が主流でした。CSSだけ見た時に何故こういう指定になっているのかがちょっとわかりづらい感じです。

.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video-wrapper video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

aspect-ratioでアスペクト比を指定

aspect-ratioを使うと、videoタグやiframeタグに動画のアスペクト比を指定するだけで実現できます。aspect-ratioは要素の幅と高さの比率を定義するプロパティで、ブラウザ幅に関わらず指定した比率を維持してくれます。

.video {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* 動画のアスペクト比を指定 */
}

まとめ

商品やサービスについてなど、ページ内に動画を置くケースは割とあるので覚えておくと便利です。

関連記事