HTML5のvideoタグとCSSで動画を背景として画面全体に表示させる方法

Webサイトで背景として動画を画面全体に流すことでユーザーの目を引きつけて言葉では伝わらないメッセージや印象を与えることができます。

ここではHTML5のvideoタグとCSSで動画を背景として画面全体に表示させる方法をご紹介します。
HTML5のvideoタグを使って動画を扱い、CSSで背景として調整していきます。

サンプルとして、1つのセクションに対してブラウザでの表示サイズの背景動画を設定してみます。


背景動画を画面全体に表示


動画を背景としてちょっとしたテキストコンテンツも載せておきます。
まずはHTMLから。

HTML

<section>
  <video src="video/bg.mov" playsinline autoplay muted loop></video>
  <div class="bg-white">
    <h2>Headline</h2>
    <p>Example text... Example text... Example text... </p>
  </div>
</section>

videoタグで動画を設定します。画面に表示させるとなると自動再生とループは属性値で設定しておく必要があります。
ユーザーの状況を考えずサイトにアクセスした時に突然音が流れるとユーザー体験としても問題ですので各ブラウザでは制御されています。音を出せさにという条件であれば動画を自動再生することができます。videoタグの属性にmutedを設定しておかないと動画は動きません。muted属性もしっかり設定しておきましょう。

また、playsinlineを設定することでスマートフォンでのインライン再生が可能となります。インライン再生が設定されていないとスマートフォンで動画再生がフルスクリーンになってしまうということが発生する恐れがあるのでこちらも設定しておくと良いでしょう。


続いてCSSになります。

CSS

section {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

video {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  background: url('../images/bg.png') no-repeat;
  background-size: cover;
  z-index: -1;
}

.bg-white {
  background: rgba(255, 255, 255, .75);
  position: absolute;
  top: 30px;
  left: 30px;
  padding: 20px;
}

セクションは画面全体に適応するため幅は100%、高さは100vhとします。
動画はpositionプロパティでセクション内にフィットさせます。
HTMLのvideoタグで「poster=”bg.png”」のようにposter属性を設定しておけば動画に対応していないブラウザなどで動画の代わりに表示させる画像を設定できますが、今回のようにCSSのbackgroundとして設定しておいても良いでしょう。backgroundに設定することで動画の読み込みが遅いときなどには動画が読み込まれる前に背景画像として、最初の画面を表示させておくことができるので。

z-indexを-1に指定することで動画が最背面となるので、他のすべてのコンテンツは動画の上に表示させることができます。

bg-whiteではテキストコンテンツの部分のスタイルを調整しています。


これで背景動画の設定が完了です。


今回のサンプルは1つのセクションでの実装になりますので、Webページのトップにメインビジュアルとして背景動画を使うか、またはページ内のどこかのセクションで使うかはご自身のデザインに合わせてください。