HTML/CSS

【コピペ】背景に動画を使ったヒーローヘッダーの実装

ヘッダーパターンについて研究しています。
今回は、背景に動画を使ったヒーローヘッダーの実装についてまとめてみたいと思います。

 

ヒーローヘッダーとは

ヒーローヘッダーは、サイトにアクセスした時に写真やスライドショー、動画などが画面いっぱいに表示されるイメージのことです。

よくあるパターンとしては、イメージの上にサイトロゴやボタンが表示されていたりします。

多分ですが、30DAYSトライアルの課題でコーディングしたデザインも、ヒーローイメージだったと思います。

 

インパクト強めで、サイトのブランディングや印象をユーザーに強くアピールすることができます。

動画を使ったヒーローヘッダーの例

例としては、こんな感じ。

宿泊施設などは、背景に施設の雰囲気や食事の動画を流し、中央に予約ボタンを置いています。

 

動画背景のヒーローヘッダー実装

 

See the Pen
ヒーローヘッダー(動画背景)
by kei (@kei_01011)
on CodePen.


HTMLとCSSで実装可能です。

以下のコードをコピペすれば実装できますが、ポイントだけ抑えて解説しておきます。

 

 HTML

<div id="mv">
  <video class="mv-bg" src="https://keibloglife.com/wp-content/uploads/2019/09/Up.mp4" muted="" autoplay="" loop=""></video>
  <div class="mv-content">
    <div class="mv-title">テストテストテストテスト</div>
  </div><!--mv-content-->
</div><!--mv-bg-->

 

 CSS

*{
  margin: 0;
  padding: 0;
}

.mv-content {
  left: 50%;
  padding: 0 24px;
  position: absolute;
  text-align: center;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  width: 100%;
  z-index: 2;
}
.mv-title {
  color: #333;
  font-size: 42px;
  font-weight: 700;
}

 

 

<video>タグで動画を埋め込み

  <video class="mv-bg" src="https://keibloglife.com/wp-content/uploads/2019/09/Up.mp4" muted="" autoplay="" loop=""></video>

videoタグ内に動画を埋め込みます。

ここでは、動画のURLを記述しています。

 

タグ内の意味としては、以下のようになりますが、背景として実装するならこの設定だと思います。

  • muted 音声を出さない
  • autoplay 自動で再生
  • loop ループ再生

 

基本的にはこれでOKですが、例えばこれに汐美荘のようにヘッダーを追加したい場合、

headerを追記してposition:fixedとすればOKかと思います。

 

 

あとよくあるのがYouTube動画を使った背景動画の埋め込みですが、

Tubular.jsというプラグインを使います。

が、長くなりそうなので別記事にまとめたいと思います。

 

 

参考にさせていただいた記事はこちら