【コピペOK】超簡単!html,cssでキービジュアルの背景にvideoタグで動画を入れる方法

この記事の内容

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

ある領域に画像を縦横いっぱいに余白なしで入れることは簡単ですよね。

背景画像とし、background-size: cover;を指定すればOKです。動画もこのように指定できればいいのですが、現状そのようなCSSプロパティは存在していません。動画の場合、少し面倒で慣れないうちは手こずるかもしれません。また、動画を入れる際にhtmlやcssの指定が不十分だと、ブラウザによっては再生されないこともあります。

実際についこないだキービジュアルを動画にしたサイトを制作しましたので、実装方法をシェアしたいと思います。

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

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

容量

大きくても10MB以内に抑えることをお勧めします。最適化されていない動画を使用したが故に、パフォーマンスの低下を招いてしまうことがあります。パフォーマンスはSEOの観点からも重要になってきますので、それらを考慮した上での、動画素材の制作や選定を行いましょう。

音を削除する

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

動画を圧縮する

画像同様、動画の圧縮はマストです。
圧縮することで大幅な容量カットが可能となりますので、お忘れなく!!

また、ここで重要なのが圧縮の際に、動画の質を落とさないことです。
ツールによっては圧縮した際に質が低下してしまうことがあります。
オススメのツールとしては、HandBrakeなんかは使いやすいですね。HandBrakeの使い方については、LIGさんの記事にてわかりやすく解説されていますので、参考にしてみてください。

上記以外にも、様々な容量削減の方法がありますので、ご興味のある方はご自身で調べてみましょう!!

実際に実装してみよう

最近では、sp時も動画を表示しているサイトがありますが、まだまだspはpcに比べるとスペックが劣りますので、sp時は背景画像を表示し、pc時は背景に動画を配置するようにしたいと思います。

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

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は、ブラウザやデバイス間での挙動が異なります。よって、属性の組み合わせ次第では、特定のブラウザやデバイスにて再生されないといったことが起こります。

ここで自動再生(autoplay)、繰り返し再生(loop)させる際の属性の組み合わせについて、少し触れておきたいと思います。上記の場合、autoplayとloopを指定すればOKかと言うと、これだとsp, chrome, iPhone(iOS)では、再生されなかったり、望んだ挙動にならなかったりします。

sp, chromeに対応させるには、autoplayとloopに加え、mutedを指定しなければなりません。また、iPhone(iOS10以降)に対応させるには、上記に加え、playsinlineが必要になります。ですので、最低限「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;
  margin-bottom: 5px;
}

.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;
    margin-bottom: 10px;
  }

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

それではCSSの解説をしていきたいと思います。
.kvに対して、width:100%,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: -10;
}

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

.video video{
  display: none;
}

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

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

video箇所のCSSを見ていきましょう。

.video箇所

videoは、kvと同じサイズを指定し、positionを使用して、top 0, left 0 の位置に配置します。また、実際のvideo(動画)は、.kvや.videoのサイズより大きくなりますので、overflow: hiddenを指定し、親要素からはみ出した部分を非表示にします。z-indexにはマイナス値を指定し、kvより下に配置します。
sp時の背景画像をbackgroundにて指定します。こちら動画が再生されなかった際の代替画像も兼ねております。

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

また、sp時の背景画像を動画の表示領域(.video)ではなく、kvに指定したり、代替画像をvideo要素に指定する実装方法が多く紹介されていますが、今回のような場合、.videoに指定することで、sp時の背景画像兼、代替画像としての役目を果たし、効率よく、記述量を減らしての実装が可能となります。
pc時(768px以上)のmin-width: 960px;には、ご自身のサイトの最小幅を指定してください。

.video::after箇所

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

.video video箇所

sp時は、背景画像を表示したいので、display: none;を指定し、非表示にします。pc時(768px以上)では、display: block;を指定し、動画を表示します。min-width, min-heightに100%を指定することで、余白ができるのを防ぎます。

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

以上で、実装が完了となります。 コピペOKですので、ぜひ試してみてください!!

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

05ebb29112d0112918912480c086fa91

採用情報 | 株式会社リブセンス

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

6f3516ed0d4c3ceade3ecc5350d1f0d8

FORCAS | ABM実践を強力にサポートするB2Bマーケティングプラットフォーム

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

d2f454b441402b41c1e634bfb26622cb

広告会社 北日本広告社 |企画、デザイン制作、WEB広告|札幌、釧路、旭川

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

まとめ

今回は、キービジュアルの背景に動画を入れる方法を紹介しました。

jQueryを利用することで、背景動画をパララックスに対応させることもできますので、ご興味のある方は、ご自身でカスタマイズしてみてください!

Share