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

2019-08-23
Writing by Jyu

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

 

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

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

 

実際についこないだキービジュアルを動画にしたサイトを作ったばかりなので、やり方を共有したいと思います。

TOPICS

動画(videoタグ)を使用する際に注意すべきポイント

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

容量

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

音を削除する

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

動画を圧縮する

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

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

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

videoタグを使って実際に実装してみる

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

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

 

HTMLを記述

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

 

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


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


<main>
  省略
</main>

 

それでは順に見ていきいきましょう。

 

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

 

まずはkvのコードですが、特に難しいことはしてませんね!
キャッチコピーを中央配置したいので、catch-copyで囲んでいます。flexboxを使って上下中央に配置するためです。

 

<div id="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のコードは省略しております。

 

/* 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のスタイルですが、CSSに関しても特に難しいことはしてませんね。#kvに対して、width:100%, height:100vh, flexbox を指定し、領域の確保とキャッチコピーの中央配置を行なっています。
各キャッチコピーのスタイルに関しては、問題ないですね!

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

 

/* 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ですので、ぜひ試してみてください!!

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

https://recruit.livesense.co.jp/

ローディングがおしゃれですね。

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

 

 

https://retrieva.jp

こちらも手が込んでますね。

ぜひカーソルを動かしてみてください。

最近はおしゃれなカーソルを実装したサイトもよく見ます。jsを使って簡単にできるので、興味がある方は調べてみてください。

 

 

https://www.forcas.com/

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

このような使い方も有効でしょう。

 

 

http://www.ad-kitanihon.co.jp

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

画面遷移もおしゃれですね。

 

 

https://www.intelligent-home.jp

こちらのサイトは動画を2つ使用しています。

あのLIGさんが制作したサイトです。