日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。
今回は 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 プロパティをそれぞれ設定する。
今回はこれで以上になります。
あくまで自分用の備忘録ですが、他の方の参考になれば幸いです。