動画を背景に設定する

2023年12月25日

みなさんメリークリスマスです。
ケミストのWeb担当みやのです。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回はサイトの背景に動画を設定する方法を調べました。
※ダークモードにすると動画が現れます。

動画を見つけてこよう

フリー素材を探すときに、写真AC様やイラストAC様にいつもお世話になっていますが、なんと動画もあるようです。ありがたく使わせていただきましょう。

サイバーなやつとか、花火とか、いいのがいっぱいあってどれにしようか迷ってしまいますね。

今回はクリスマスということで、キラキラのハートにしてみました。

videoタグを使って設置

参考：HPcode｜動画をヒーローイメージのように画面いっぱいに背景表示させるCSS

参考：Webクリエイターボックス｜背景に動画を使ったWebサイトの作り方

まずは<video>タグを設置し、srcで動画ファイルへのパスを指定します。

<video src="img/kirakira_heart.mp4"></video>

以下のように<source>タグを使ってもいいみたいです。どう違うのかはわかりませんが、今回は<source>タグを使ってやってみます。

<video>
  <source src="img/kirakira_heart.mp4" type="video/mp4">
</video>

<video>タグにmuted、autoplay、loop、playsinline属性を追加します。

mutedは消音、autoplayは自動再生、loopは繰り返し、playsinlineはiOSで動画を再生するのに必要なんだそうです。

またposter属性で、動画が読み込めなかった時に表示させる画像を指定しておきます。

<video muted autoplay loop playsinline poster="img/kirakira_heart.jpg">
  <source src="img/kirakira_heart.mp4" type="video/mp4">
</video>

<video>タグを二重の<div>で囲って、外側にはmvというID、内側にはmv-bgというクラスを付与しておきます。

<div id="mv">
  <div class="mv-bg">
    <video muted autoplay loop playsinline poster="img/kirakira_heart.jpg">
      <source src="img/kirakira_heart.mp4" type="video/mp4">
    </video>
  </div>
</div>

CSSを記述します。

#mv {
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: -1;
}

.mv-bg video {
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%)translateY(-50%);
  transform: translateX(-50%)translateY(-50%);
  max-height: initial;
  max-width: initial;
  min-height: 100vh;
  min-width: 100%;
  position: fixed;  
  z-index: -1;
}

いまいち意味がよくわかっていません。max-heightとmax-widthのinitialって何なんでしょう。

まとめ

親要素にheight:100vhを指定し、子要素のpotision:fixedをabsoluteにするとヒーローイメージっぽくなるみたいです。

縦長のスマホ画面だとどうしても動画の左右が切れてしまうので、スマホでもいい感じに表示される方法がないか探してみたいと思います。

2023年もお世話になりました。
2024年もよろしくお願いします。