【コピペOK】レスポンシブ対応のHTML5 videoタグ埋め込み方法｜属性・CSSも解説

Webサイトに動画を載せたいとき、最もシンプルな方法が HTML5の<video>タグ を使うやり方です。
YouTubeの埋め込みと違って、サーバーにアップロードしたMP4などの動画をそのまま表示できるため、広告なしで自由にデザインできます。

YouTube埋め込みをCSSでレスポンシブ対応する方法【2025年最新版】

YouTube動画の埋め込みがスマホで崩れる…そんな悩みをCSSだけで解決！aspect-ratioを使ったレスポンシブ対応や、lazyloadでの表示速度改善、Cookieなしで埋め込む方法も初心者向けにわかりやすく解説します。

しかし、スマホ・タブレット・PCなど 画面サイズが異なるデバイスで崩れない「レスポンシブ対応」 をしないと、せっかくの動画が見づらくなってしまいます。

この記事では、初心者の方でもすぐ使えるように 【コピペOKのサンプルコード】 を紹介しながら、
<video>タグの基本構文からレスポンシブ対応のCSS、便利な属性（autoplay / loop / muted / poster など）まで分かりやすく解説します。

動画をすっきり綺麗に埋め込みたい方は、ぜひ参考にしてください。

videoタグとは？【基本の使い方】
1. 基本構文
2. 代表的な属性
レスポンシブ対応させる基本CSS（コピペOKコード）
1. 古いブラウザでも安心なpadding-bottom方式のコード例
aspect-ratio方式とpadding方式のどっちを使えばいい？
【まとめ】レスポンシブ対応のvideoタグで使いやすい動画埋め込みを実現しよう

videoタグとは？【基本の使い方】

<video>タグは、HTML5で導入された 動画をWebページに直接埋め込むためのタグ です。
以前はFlashプレーヤーなどを使う必要がありましたが、今では<video>タグひとつでシンプルに動画を再生できます。

基本構文

<video src="movie.mp4" controls></video>

src … 表示する動画ファイル（例：movie.mp4）
controls … 再生ボタン・音量調整バーなどの操作UIを表示

このように最低限の書き方でも、ブラウザ標準のプレーヤーで再生できます。

代表的な属性

autoplay … ページを開いたときに自動再生（※muted必須）
loop … 動画を繰り返し再生
muted … 音声をミュート状態で再生
playsinline … スマホで全画面化せず、ページ内で再生
poster … 動画が始まる前に表示するサムネイル画像

<video src="movie.mp4" autoplay loop muted playsinline poster="thumb.jpg"></video>

これらの属性を組み合わせれば、Webサイトのデザインや目的に合わせて柔軟に設定できます。

レスポンシブ対応させる基本CSS（コピペOKコード）

最近のブラウザでは aspect-ratio プロパティ を使えば、シンプルにアスペクト比を維持したままレスポンシブ対応が可能です。

<!-- HTML：videoタグの例 -->
<video src="sample.mp4" controls></video>

/* CSS：aspect-ratioでレスポンシブ対応 */
video {
  width: 100%;
  aspect-ratio: 16 / 9; /* アスペクト比を指定（16:9の場合） */
  height: auto;
  display: block;
}

ポイント

aspect-ratio: 16/9; → 一般的な横長動画の比率。
縦長動画なら aspect-ratio: 9/16; に変更すればOK。
width: 100% と組み合わせることで、スマホやタブレットでも比率を崩さずに自動調整。
古いブラウザ（IEなど）では対応していないので、必要なら padding-bottom方式（従来のレスポンシブ埋め込み手法） をフォールバックとして併記すると安心です。

古いブラウザでも安心なpadding-bottom方式のコード例

これは 古いブラウザ（aspect-ratio未対応）でも確実にレスポンシブ対応できる方法です。

<!-- HTML：videoタグの例 -->
<div class="video-wrapper">
  <video controls>
    <source src="sample.mp4" type="video/mp4">
  </video>
</div>

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 の比率 → 9 ÷ 16 = 0.5625 */
  height: 0;
  overflow: hidden;
  max-width: 800px; /* 任意：最大幅 */
  margin: 0 auto;   /* 中央寄せ */
}

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

ポイント

.video-wrapper の padding-bottom が高さを確保し、比率を維持。
<video> タグは absolute で親要素にフィット。
動画ファイルは sample.mp4 の部分を置き換えるだけでOK。
16:9以外の比率なら padding-bottom を変更（例：4:3 → 75%）。

aspect-ratio方式とpadding方式のどっちを使えばいい？

レスポンシブ対応で動画を埋め込む場合、主に以下の2つのやり方があります。

1. aspect-ratio プロパティを使う方法

video {
  width: 100%;
  aspect-ratio: 16/9;
}

メリット

コードがとてもシンプル
CSSだけで完結する
意図したアスペクト比をそのまま維持できる

デメリット

古いブラウザ（IE、古いSafari/Chromeなど）では未対応
対応状況を気にする必要がある

2. padding-bottom 方式（昔からの定番）

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

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

メリット