背景に動画を流しているWebサイトなどがよくあります。そんな動画背景をスクリプトを使わずにHTMLとCSSだけで簡単に実装する方法を紹介します。

動画背景の準備

動画背景を作るにあたって、おおよそ必要になる内容は次のようなものがあります。

動画素材の用意

当たり前ですが、まずは動画を準備します。動画を作成するには自分で動画を撮影したり、動画素材を配布しているサイトからダウンロードして使用するなどの方法があります。自分のイメージ通りの映像を流したいなら自分で作成した動画を使うのが一番良いかと思います。
また、動画を背景に用いる場合は、ファイルサイズにも気を付けて作成するようにしましょう。サイズが大きすぎると読み込みに時間がかかる原因になります。

動画の代替画像を用意

ユーザーが使用している環境によっては、動画ファイルが利用できない場合もありますので、動画の代わりとなる画像も用意しておくと良いでしょう。

HTMLとCSSを使った実装

素材の準備ができたら、HTMLとCSSを使って動画背景を実装していきます。ページ内で動画を表示させるには、video要素を使用します。

<div id="bg-movie">
<video src="bg-movie.mp4" poster="bg-movie.jpg" autoplay loop></video>
<div class="inner">
～表示させるコンテンツ～
</div>
</div>

img要素と同じようにsrc属性で表示させたい動画ファイルを読み込みます。それ以外にもいくつか属性を指定していますので簡単に見ていきます。

poster属性

これは、動画が利用できない場合の代替として表示させる画像を指定する場合に使用します。

autoplay属性

これを指定すると自動で動画が再生されるようになります。背景に動画を使用する場合はほぼ必須で指定する属性かと思います。

loop属性

これを指定すると繰り返し再生されます。大抵の場合はautoplay属性とセットで指定しておく属性かと思います。

CSSには以下のような指定をします。

video {
  position: fixed;
  left: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
}
.inner {
  position: relative;
  z-index: 2;
}

ポイントとなるのは、動画の上に表示するコンテンツ部分の指定で、positionプロパティで「relative」を指定することと、z-indexプロパティでvideo要素よりも上に重なるように指定することです。例では必要な2つの指定しか記述していませんが、コンテンツを中央に表示させたいなど必要に応じて指定内容を追加してください。

以上が、HTMLとCSSだけを使って背景に動画を流す方法となります。

おすすめの記事