🎉 お知らせ:サイト名が『webkore』から『模写修行 media』に変更になりました。6月以降にドメインも『moshashugyo.com/media/』へ変更する予定です。

HTML/CSS

超簡単!HTML・CSSでキービジュアルの背景にvideoタグで動画を入れる方法

Author:Jyu

この記事の目次

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

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

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

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

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

サイト内で動画を使用する際にいくつか注意すべきポイントがあります。

以下のポイントをクリアした動画を使用することをお勧めします。

容量

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

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

音を削除する

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

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

動画を圧縮する

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

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

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

実際に実装してみよう!

はじめに、こちらのDEMOをご覧ください。

HTMLを記述する

以下が、全体のHTMLコードとなります。 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>

<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"で囲んでいます。


html
<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以降でのインライン再生が可能となります。

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

videoは、属性の組み合わせ次第では、特定のブラウザやデバイスにて再生されないといったことが起こります。

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

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

CSSを記述する

以下が、全体のCSSコードとなります。 mainのコードは省略しています。

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側で高さを取得し指定します。

pc時(768px以上)のmin-width: 960px;には、ご自身のサイトの最小幅を指定してください。


css
/* 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を使用することで、サイズやポジションなど、自由度の高いレイアウトが可能となります。

pc時(768px以上)のmin-width: 960px;には、ご自身のサイトの最小幅を指定してください。

.video::after箇所

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

.video video箇所

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

positionを使用し、videoを中央配置することで、画面幅を変更した際に background-size: cover; background-position: center; のような挙動を再現することが可能となります。

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

株式会社リブセンス

株式会社リブセンス

株式会社リブセンス

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

FORCAS

forcas

FORCAS

このサイトは自社のサービスを動画で流しています。 このような使い方も有効でしょう。

北日本広告社

北日本広告社

北日本広告社

白と黒を基調としたスタイリッシュなサイトです。 画面遷移もおしゃれですね。

駆け出しエンジニアのためのコーディング練習教材

Coming Soon
© 2021 模写修行 media.