CSSだけで全画面の背景動画を実装する方法

CSSだけで全画面の背景動画を実装する方法をご紹介いたします。ほぼコピペで実装できますので、サイトの背景に動画を表示したいとお考えの方は、ぜひ試してみてください。

なお、動画は別途ご用意いただく必要があります。

HTMLでは、videoタグで動画を設置します。記述する場所は、</body>の直前など、どこでも構いません。


<video autoplay loop poster="images/bg.png" id="video-background" muted>
  <source src="movie/bg.mp4" type="video/mp4">
</video>

video要素に#video-backgroundを指定しておきます。

CSSでは、以下のように記述します。


#video-background {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -999;
}

min-widthとmin-heightを100%にすることで、背景動画のサイズをブラウザの全画面になるようにしています。

また、z-indexでマイナス値を指定することで、他の要素よりも後ろに重なり、動画が背景として表示されるようになります。

あとがき

動画を背景にすると聞くと難しそうなイメージが湧きますが、非常にシンプルな指定で実装できますね。

動画を背景に設置したいと思ったら、ぜひ参考にしていただければと思います。