HTML・CSSでメインビジュアルの背景にvideoタグで動画を入れる方法

web制作では、サイトのメインビジュアルを動画にしたいという要望をもらうことがあります。デバイスのスペックが上がったことで、メインビジュアルに動画を使うサイトが増えてきています。

ある領域に画像を縦横いっぱいに余白なしで入れることは簡単ですよね。背景画像とし、background-size: cover;を指定すれば良いだけです。

動画もこのように指定できればいいのですが、現状そのようなCSSプロパティは存在しません。動画の場合、少し面倒で慣れないうちは手こずるかもしれません。

この記事ではメインビジュアルの背景に動画を入れる方法を紹介します。

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

👆 メンターやってます 👆

HTML・CSSで背景に動画（video タグ）を使用する際に注意すべきポイント

サイト内で動画を使用する際にいくつか注意すべきポイントがあります。以下のポイントをクリアした動画を用意しましょう。

容量

大きくても10MB以内に抑えましょう。

最適化されていない動画を使用すると、パフォーマンスの低下を招いてしまうことがあります。

音を削除する

動画から音を削除するだけでも容量は変わります。

背景に動画を使用する際は、音をミュートすることが多いです。必要がなければ、属性でミュートにするのではなく、動画そのものから音を削除してしまいましょう。

動画を圧縮する

画像同様、動画の圧縮はマストです。

圧縮することで大幅な容量カットが可能となります。

ツールによっては圧縮した際に画質が落ちるものがあります。なるべく画質を落とさずに、容量だけ減らせればベストです。

実際に実装してみよう！

実装方法を紹介します。

まずはDEMOをご覧ください。

HTML を記述する

<div class="kv">
  <div class="catch-copy">
      <p class="main-copy">Video</p>
      <p class="sub-copy">How to use video tag</p>
  </div>
</div>

<div class="video">
  <video src="video/sample.mp4" autoplay loop muted playsinlin></video>
</div>

<main>
  ・・・
</main>

全体のHTMLコードです。

長くなるので切り取って紹介します。

---

<div class="kv">
  <div class="catch-copy">
      <p class="main-copy">Video</p>
      <p class="sub-copy">How to use video tag</p>
  </div>
</div>

.kvでは、flexboxを利用し、キャッチコピーを中央配置したいので、class="catch-copy"で囲んでいます。

---

<div class="video">
  <video src="video/sample.mp4" autoplay loop muted playsinlin></video>
</div>

動画箇所です。video要素に必要な属性を指定していきます。

💡 src

srcには動画のパスを指定します。

💡 autoplay

autoplayは、動画を自動再生させるための属性です。

💡 loop

loopは、繰り返し再生させるための属性です。

💡 muted

mutedは、消音させるための属性です。

💡 playsinline

playsinline属性を指定することで、iOS10以降でのインライン再生が可能になります。

---

🌀 再生されない際に見直す箇所

属性の組み合わせ次第では、特定のブラウザやデバイスで再生されない場合があります。

動画を背景として利用する際、自動再生かつ繰り返し再生にすることがほとんどです。その場合、autoplayとloopを指定すれば良いかと言うと、これだと再生されないブラウザやデバイスがあります。

全ブラウザ、全デバイスで正常に再生させるためには、上記に加え、mutedとplaysinlineを指定する必要があります。自動再生かつ繰り返し再生で望んだ挙動にならない場合は、autoplay muted playsinline loopが指定されているか、確認しましょう。

CSSを記述する

/* kv */
.kv{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kv .main-copy{
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  letter-spacing: .2em;
}

.kv .sub-copy{
  color: #fff;
  font-size: 20px;
  text-align: center;
}

/* video */
.video{
  width: 100%;
  height: 100vh;
  background: url(../img/kv-alternative.jpg) no-repeat center/cover;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: #10394b;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .3;
}

.video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (min-width: 768px) {
  /* kv */
  .kv{
    min-width: 960px;
  }

  .kv .main-copy{
    font-size: 60px;
  }

  .kv .sub-copy{
    font-size: 30px;
  }

  /* video */
  .video{
    min-width: 960px;
  }
}

全体のCSSコードです。

長くなるので切り取って紹介します。

---

/* kv */
.kv{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kv .main-copy{
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  letter-spacing: .2em;
}

.kv .sub-copy{
  color: #fff;
  font-size: 20px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .kv{
    min-width: 960px;
  }

  .kv .main-copy{
    font-size: 60px;
  }

  .kv .sub-copy{
    font-size: 30px;
  }
}

kv箇所のCSSです。

.kvに対して、 height:100vh, flexboxを指定し、領域の確保とキャッチコピーの中央配置を行なっています。

今回は、kvの高さをheight:100vh;と指定していますが、実際はspのアドレスバーを考慮し、JavaScript側で高さを取得して指定します。

---

/* video */
.video{
  width: 100%;
  height: 100vh;
  background: url(../img/kv-alternative.jpg) no-repeat center/cover;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(16, 57, 75, .3);
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

@media screen and (min-width: 768px) {
  .video{
    min-width: 960px;
  }
}

video箇所のCSSです。

💡 .video

video は、kvと同じサイズを指定し、positionを使用して、top 0, left 0 の位置に配置します。また、実際の video(動画)は、.kvや.videoのサイズより大きくなるので、overflow: hiddenで、親要素からはみ出した部分を非表示にします。z-indexにはマイナス値を指定してください。

万が一、動画が表示されなかった際の代替画像を背景画像で指定します。

代替画像は、video要素のposter属性で指定する方法もありますが、backgroundを使用することで、サイズやポジションなど、自由度の高いレイアウトが可能になります。

💡 .video::after

擬似要素を利用し、透明度30%のフィルターをかけています。

💡 .video video

min-width, min-heightに 100％を指定することで、余白ができるのを防ぎます。

positionを使用し、videoを中央配置することで、画面幅を変更した際にCSSで背景画像を入れたときような挙動を再現することが可能となります。

メインビジュアルに動画が使われているサイト紹介

メインビジュアルに動画が使われているサイトを紹介します。

株式会社リブセンス

採用サイトはブランディングもあるのでアニメーションなどでおしゃれに作ることが多いです。

FORCAS

自社のサービスを動画で流しています。

北日本広告社

白と黒を基調としたスタイリッシュなサイトです。

独学に限界を感じていませんか？