日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。

今回は video タグを用いた疑似アニメーション背景について

css の background プロパティには動画ファイルを直接設定することが出来ません。

そこで、自分でリサーチした内容をまとめていきたいと思います。

方法：body タグ直下に video タグを配置し、css の設定で画面全体を覆うようにサイズを変更する。そして video タグには position: fixed、それ以外の同じ階層の親要素には position: relative プロパティを設定して、各要素を重ねて表示する。

前準備

mp4 形式のファイルをそのまま採用する場合、そのままの画質でウェブサイトに表示させようとすると、動画の読み込みに時間が掛かってしまいます。ウェブサイトの背景に使用する動画のファイルサイズは最大でも１ＭＢ以内をオススメします。

（自分が普段利用している著作権フリーの動画素材サイトを共有しておきます。参考になれば幸いです）
高品質なフリー動画素材 - Pixabay

このサイトでは高画質な動画素材をダウンロードできますが、ファイルサイズが小さな動画でも１ＭＢを超えているものがほとんどです。

その為、次にダウンロードした動画を圧縮加工する必要があります。

（自分が普段利用しているオンラインサービスを共有しておきます。参考になれば幸いです）
VideoSmaller

ダウンロードした動画をこのサイトで圧縮することで、ファイルサイズを１ＭＢ以下まで小さくすることが出来ます。
今回はウェブサイトの背景の為の動画素材なので、「ビデオからオーディオを削除する」のチェックボックスを忘れずに有効にしておきましょう。

記述例

HTML

<html>
  <body>
    <video class="background_video" src="動画背景用素材" autoplay loop muted poster="動画背景用素材のスクリーンショット"></video>
    <div class="">
      <h1>hello world</h1>
    </div>
  </body>
</html>

CSS

body {
  margin: 0;
}
div {
  position: relative;
  z-index: 1;
}
h1 {
  margin: 0;
}
.background_video {
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  z-index: 0;
}

解説

１・video タグには以下の設定を行い、position: fixed と z-index プロパティをそれぞれ設定する。
autoplay（サイト読み込み時に自動再生）
loop（再生終了後にループ再生）
muted（動画の音声を再生しない、事前にオーディオを削除していても、この設定をしないと自動再生が行われない）
poster（ブラウザが動画再生未対応の場合、posterで設定した画像が代わりに表示される）

２・video と同階層の別要素には position: relative と z-index プロパティをそれぞれ設定する。

今回はこれで以上になります。

あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。