(Sample)

今回は、「背景に動画を表示するWebページを作りたい！」という新人エンジニアの方に向けて、そのやり方をHTMLとCSSの基本から丁寧に解説していきます。

動画を背景にするって、ちょっと難しそう…と思うかもしれません。でも、ポイントを押さえれば意外とシンプルなんです。一緒に見ていきましょう！

背景動画を表示する基本構成とは？

まずは、今回紹介するサンプルの全体像をざっくり説明します。

<body>
  <div id="video-container">
    <video id="video" autoplay muted loop>
      <source src="leaves.mp4" type="video/mp4">
    </video>
  </div>
  <div class="container">
    <div class="center">
      <h1>Background Video Example</h1>
      <p>This is a web page with a background video.</p>
    </div>
  </div>
</body>

この構成の中には大きく2つの要素があります。

① <video> 要素で背景動画を再生する

<video id="video" autoplay muted loop>
  <source src="leaves.mp4" type="video/mp4">
</video>

ここが動画を再生している本体です。
このタグのポイントは以下の3つの属性です。

属性説明
autoplayページ読み込みと同時に自動再生させる
muted音声をミュート（これがないと最近のブラウザでは自動再生されません）
loop動画を繰り返し再生する

また、<source> タグで動画ファイルの種類と場所を指定します。

<source src="leaves.mp4" type="video/mp4">
  • src：動画ファイルのパス。今回は同じフォルダにある leaves.mp4 を指定。
  • type：動画の種類（MIMEタイプ）。ここでは "video/mp4" です。

CSSのスタイルで「背景っぽく」見せる工夫

さて、動画をただ表示するだけだと画面の一部にしか表示されないかもしれません。「背景として」ページ全体に表示するためのCSSの工夫がカギです。

② #video-container で動画の土台をつくる

#video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

ここが「背景として動画を貼り付けるための箱」になります。

  • position: fixed: ウィンドウに固定（スクロールしても動かない）
  • width: 100%, height: 100%: 画面全体をカバー
  • z-index: -1: コンテンツの「裏側」に表示

③ #video で動画のサイズと位置を調整

#video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}

この設定がないと、動画が部分的にしか表示されなかったり、中央に配置されなかったりします。

  • top: 50%, left: 50% と transform: 中央にぴったり配置
  • min-width: 100%, min-height: 100%: 画面サイズに対して最小限の幅・高さを確保して、隙間ができないようにします

たとえば、YouTubeを全画面表示する感じを思い浮かべてください。それに近いです。

その他のスタイルの意味

全体の設定（body）

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ページに余白ができたりスクロールバーが出たりしないように調整しています。

コンテンツを中央に配置する

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

Flexboxを使って、テキストを画面の中央に配置しています。

動画を背景にするメリットと注意点

メリット

  • 視覚的にインパクトがある（おしゃれ！）
  • 一瞬でブランドや世界観を伝えられる

デメリット

  • ファイルサイズが大きくなりがち（読み込みに時間がかかる）
  • モバイルでは再生されない場合がある
  • 音声付きにしたい場合は追加の工夫が必要

数式で考える画面中央の配置

CSSで使っているこの式：

top: 50%;
transform: translate(-50%, -50%);

これは、動画の中心点を画面の中央に合わせるという意味です。

もし数式で表すとすれば：

  • 中央位置 = 親要素の高さ × 0.5 − 要素の高さ × 0.5
  • つまり：
    • 中央 = 50% - (要素の高さ / 2)
    • Central Position = 50% - (Element Height ÷ 2)

今後の学習のヒント

動画背景は、HTML・CSSの基本＋動画ファイルの扱いを学ぶ良いトレーニングになります。さらにレベルアップしたい方は、以下も学んでみてください！

  • レスポンシブ対応（スマホでは静止画に切り替えるなど）
  • JavaScriptを使って再生/停止を切り替える
  • 複数形式の動画対応（webmなど）
  • 動画の軽量化方法（圧縮や最適化）
研修のカリキュラムを見てみる