CSS 背景画面いっぱいに動画を表示する

画面いっぱいに動画を表示するには<video>タグをCSSで装飾することで実現できます。

<video>で表示した動画をCSSで横幅と縦幅を画面いっぱいまで指定して表示位置を調整します。キービジュアルでよく使われるような動画を背景の画面いっぱいに表示するデザインを実現できます。

特徴

・レスポンシブ対応
・Javascriptなし
・動画を天地中央表示
・オーバーレイあり
・テキスト天地中央表示

動画ファイルを使う

See the Pen
CSS – Hero Movie (Overlay＆Text) by kura (@kuranopen)
on CodePen.

自前の動画ファイルをアップロードして使う方法です。

特徴

• <video>タグを使用
• 表示速度は自サーバーに依存

HTML

<section class="hero">
  <div class="video-box overlay">
    <video class="video" muted autoplay loop playsinline>
      <source src="http://nowte.net/public/movie.mp4" type="video/mp4">
    </video>
  </div>
  <div class="text-box">
    <h1>Hero Movie<br>Overlay Text</h1>
  </div>
</section>

CSS

/* wrap */

.hero {
  position: relative;
}

/* video */

.video-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* overlay */

.overlay::after {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: rgba(0, 0, 0, 0.4);
}

/* text */

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
h1 {
  font-family: Roboto;
  font-size: 60px;
  font-weight: bold;
  line-height: 1.2;
  padding: 0 50px;
  text-align: center;
  color: #fff;
}

参考リファレンス

• <video>の使い方

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選