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;
}

参考リファレンス

デザイナーのUIメモ帳

レイアウト

ヒーローエリア

フォーム

画像

テキスト

ナビゲーション

コンテンツ

CSSデザインサンプル

モバイルサイト

Javascript

Google Map

Youtube

  • このエントリーをはてなブックマークに追加

プロフィール

kura

個人開発歴5年以上。サイト開発・運営。 ペアでエンジニアとアプリ開発しています。

このサイトではWEBデザイン初心者向けになるべく分かりやすいように解説したり、WEBデザインの便利ツール紹介、開発したりしています。

note