cssでvideoをfixed全画面背景にした上にbackgroud背景画像を設置する方法

videoタグで全画面いっぱいにしたレイアウトを作っていた時の備忘録で、videoの映像に対して、透過グラデーションや、網掛けの背景画像を設置した時の方法を参考までに晒しておきます。

今更な内容だし、色んなやり方があると思いますが、本記事では、とりあえずcssだけでやるカンタンな方法を紹介します。

cssでvideoをfixedの全画面背景にして、そこにbackgroudの背景画像を設置する方法

ソースコード

ソースコードはこちらです。

<div id="mv_video">
  <video autoplay loop muted>
    <source src="****/****.mp4" type="video/mp4" />
  </video>
</div>

#mv_video{
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
}

#mv_video:after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url("*****/*****.png");
}

ソースコードの説明

まず、「position:fixed;」で、videoの映像を流すエリアを全画面表示します。

それから「position:fixed;」で全画面に広げた要素に対して背景画像を設置するためには、疑似要素「after」を使って、「position:absolute;」の絶対中央配置で設置すればOKです。

relativeがないのに、なぜabsolute？という感じですが、absoluteは、その上位要素にrelativeがない場合は、ルート最上位が親要素となります。（ブラウザウィンドウサイズに対してabsoluteとなる。）

リサイズ対応するならjs・jqueryを利用する

ただ、上記の書き方では、ブラウザウィンドウを拡縮した際、そのリサイズ追従が完ぺきではありません。ブラウザウィンドウを拡縮した際、そのウィンドウの横幅もしくは縦幅に併せて自動的に調整したい場合は、jsおよびjqueryを利用してください。

リサイズについては、下記の記事が参考になるかと思います。

div要素の高さheightをウィンドウサイズのリサイズ高さに自動的に合わせる方法