CSS レスポンシブビデオ

Volardev 編集部 April 13, 2026

ビデオも画像と同様、レスポンシブ対応は必須です。しかし、ビデオには「アスペクト比（縦横比）」を厳格に守らなければならないという特性があり、単に幅を広げるだけでは上下に黒い帯が出たり、歪んだりすることがあります。

1. width プロパティを使用する

width プロパティを 100% に設定し、height を auto に設定すると、ビデオプレイヤーは親要素の幅に合わせて伸縮します。

video {
  width: 100%;
  height: auto;
}

注意: この方法では、親要素がビデオ本来のサイズより大きい場合、ビデオが拡大され、画質が粗くなる可能性があります。

2. max-width プロパティを使用する

ビデオが元のサイズ以上に大きくならないようにするには、max-width プロパティを使用します。

video {
  max-width: 100%;
  height: auto;
}

3. アスペクト比を維持する (The Padding Hack)

YouTube の <iframe> 埋め込みなどの場合、単に width: 100% を指定しただけでは、高さが自動で調整されず、アスペクト比が崩れてしまうことがあります。

これを解決する伝統的な手法が、コンテナ要素にパーセンテージのパディングを与える方法です。

3.1 16:9 の比率を保つ実装例

16:9 の比率の場合、高さは幅の 56.25% (9 / 16 = 0.5625) になります。

.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 の比率 */
  height: 0;
}

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

4. モダンな解決策：aspect-ratio プロパティ

2026年現在のモダンなブラウザ環境では、より直感的な aspect-ratio プロパティを使用するのがベストプラクティスです。複雑なパディングの計算や絶対配置（absolute）を使わずに、1行でアスペクト比を固定できます。

.responsive-video {
  width: 100%;
  /* 16 / 9 の比率を強制する */
  aspect-ratio: 16 / 9;
  height: auto;
}

5. レスポンシブビデオの注意点

自動再生（Autoplay）: 多くのモバイルブラウザでは、ユーザーのデータ通信量を保護するため、消音（muted）に設定されていないビデオの自動再生をブロックします。
ポスター画像: ビデオが読み込まれるまでの間、poster 属性を使って静止画を表示させると、ユーザー体験（UX）が向上します。

動画のレスポンシブ対応ができるようになると、リッチなビジュアルコンテンツを安心してサイトに組み込めるようになります。