ウェブサイト作成用備忘録・３号：video タグを活用した疑似アニメーション背景 - Qiita

日々の学習のアウトプットの為、自主学習の際に工夫した内容を記録していきます。 今回は video タグを用いた疑似アニメーション背景について css の background プロパティには動画ファイルを直接設定することが出来ません。 そこで、自分でリサーチした内容をまとめていきたいと思います。 方法：body タグ直下に video タグを配置し、css の設定で画面全体を覆うようにサイズを変更する。そして video タグには position: fixed、それ以外の同じ階層の親要素には position: relative プロパティを設定して、各要素を重ねて表示する。 前準備 mp4 形式のファイルをそのまま採用する場合、そのままの画質でウェブサイトに表示させようとすると、動画の読み込みに時間が掛かってしまいます。ウェブサイトの背景に使用する動画のファイルサイズは最大でも１ＭＢ以