HTML/CSS 背景動画を設定する

背景動画のページが増えていますがいくつか方法があります、このページではMP4の動画を背景に指定してループしています。

なぜウェブで複数のメディア形式が必要とされているかを理解することが重要です。ほとんどがこの記事の範囲外の様々な理由によるものですが、それぞれのブラウザーは別々なメディア形式に対応しています。ウェブにおけるメディア形式の領域は、アメリカや EU 諸国を含む多くの国の特許法に大きく悩まされています

ファイル形式はいくつかありますが必要なsourceを用意してください。

1. 動画を撮影します。
2. Adobe Premiere Pro 2020で編集します。
   1. 5秒くらいにする
   2. コピー貼り付けして逆再生
   3. Youtube 720pで書き出し
3. コーディング

code

HTML

<video src="./img/bg1.mp4" autoplay loop>
<img src="./img/cap.jpg" alt="">

CSS

video {
  display: block;
  margin: 0 0 0 auto;
  height:100vh;
  opacity:0.4;
}

Download

動画（サイズ:8.6MB 11s）