動画を全画面表示にしてトップに固定する。

ロッチくん

動画をファーストビューで画面いっぱいに表示するとダイナミックでかっこいいニャ

メインビジュアルの見せ方として最近は画像を画面いっぱいに表示するようなダイナミックな手法が増えてきました。その中でも動画を使った見せ方はユーザーの興味をより引きやすく人気があります。

はじめに
コード
1. HTML
2. CSS
ちょこっと解説

はじめに

以前紹介したパララックス効果を使用したこちらのデモサイトを応用しファーストビューに動画を最下層にして固定し、スクロールするとその上を画像とテキストが通過し、フッターでまた動画が見えてくるというこれだけで割とモダンなWEBサイトになりそうなデザインになってます。

スマホ対応のパララックス効果を実装する記事はこちらから

パララックス効果をスマホでも実装する（CSSのみ）

パララックス効果を簡単に実装できるCSSプロパティとして background-attachment: fixed; があります。しかし、こちらのやり方ではiOS の Safari には対応できていないため、今回紹介するclip-pathプロパティを用いて背景を矩形に切り抜くやり方でスマホ対応のパララックスページを実装していきます。

それでは実際にコードを見て行きましょう！

コード

HTML

<div class="wrapper">
    <header>
        <div class="headerInner">
        <h1>LOGO</h1>
        </div>
    </header>
    <div class="container">
        <div id="hero">
            <h2>I like record players.</h2>
            <div class="movieArea">
                <video playsinline autoplay muted loop><source src="./video/record.mp4" type="video/mp4"></video>
            </div>
        </div>
        <section>
            <div class="sectionInner">
                <div id="imageBg01" class="imageBg"></div>
                <div class="cntFrame">
                    <h2>見出し1</h2>
                    <P>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</P>
                </div>
            </div>
        </section>
        <section>
            <div class="sectionInner">
                <div id="imageBg02" class="imageBg"></div>
                <div class="cntFrame">
                    <h2>見出し2</h2>
                    <P>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</P>
                </div>
            </div>
        </section>
        <section>
            <div class="sectionInner">
                <div id="imageBg03" class="imageBg"></div>
                <div class="cntFrame">
                    <h2>見出し3</h2>
                    <P>ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。</P>
                </div>
            </div>
        </section>
    </div>
    <footer>
        <div class="footerInner">
        <p>FOOTER</p>
        </div>
    </footer>
</div>

CSS

.wrapper {
  width: 100%;
}
header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: #fff;
  z-index: 1;
}
.headerInner {
  max-width: 1000px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  font-size: 20px;
  color: #333;
  font-weight: bold;
}
.container {
  width: 100%;
}
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
h2 {
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  position: relative;
  z-index: 99;
}
.movieArea {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.movieArea::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
}
.movieArea video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  z-index: -100;
  background-size: cover;
}
section {
  position: relative;
  width: 100%;
  height: 200vh;
}
section .sectionInner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 0 0 0);
}
section .imageBg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
}
section #imageBg01 {
  background-image: url(./images/imageBg01.jpg);
}
section #imageBg02 {
  background-image: url(./images/imageBg02.jpg);
}
section #imageBg03 {
  background-image: url(./images/imageBg03.jpg);
}
section div.cntFrame {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100vh;
  padding: 0 100px;
  margin-top: 100vh;
  background: rgba(255,255,255,.8);
  color: #111;
}
section div.cntFrame h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 2em;;
}
footer {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.footerInner {
  width: 100%;
  height: 100px;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.footerInner p {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}

@media (max-width: 768px) {
  section div.cntFrame {
    padding: 0 15px;
  }
  section #imageBg01 {
    background-position: 20% top;
  }
  section #imageBg02 {
    background-position: 20% top;
  }
  section #imageBg03 {
    background-position: 62% top;
  }
}

ちょこっと解説

長々とコードを書いてますが以前紹介した画像のパララックスとほぼ変わりませんので、こちらを参考にしてください。
headerとfooterのcssの指定がやや異なりますがほぼ同じです。

パララックス効果をスマホでも実装する（CSSのみ）

今回解説するトップに固定された動画の全画面表示に必要なコードを抜粋してみましょう。

<div id="hero">
    <h2>I like record players.</h2>
    <div class="movieArea">
        <video playsinline autoplay muted loop><source src="./video/record.mp4" type="video/mp4"></video>
    </div>
</div>

videoタグについては以下を参照して下さい。

: 動画埋め込み要素 - HTML: ハイパーテキストマークアップ言語 | MDN

は HTML の要素で、文書中に動画再生に対応するメディアプレイヤーを埋め込みます。を音声コンテンツのために使用することもできますが、要素の方がユーザーにとって使い勝手が良いかもしれません。

今回は以下の属性を使用しいています。

playsinline：インライン再生を可能にする
autoplay：自動再生する
muted：動画再生時にデフォルトでミュートにする
loop：繰り返し再生する

※Chromeでは、autoplay属性を使うときに、muted属性を付与しないと再生されないようなので注意しましょう！

#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
h2 {
  font-size: 36px;
  color: #fff;
  font-weight: bold;
  position: relative;
  z-index: 99;
}
.movieArea {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.movieArea::before {
  content: "";
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.6);
}
.movieArea video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  z-index: -100;
  background-size: cover;
}

videoタグを「position: fixed;」「overflow: hidden;」した画面いっぱいの枠（div.movieArea）で取り囲んで、その中で動画（videoタグ）を「position: absolute;」の中央寄せして最下層「z-index: -100;」に「min-width: 100%;」「min-height: 100%;」「background-size: cover;」で親要素に対して縦横全面で表示してます。