動画背景とは

ヒーローセクションなどの背景に、ループ再生する動画を敷くレイアウト演出。

概要

ヒーローセクションなどの背景全体に、音のないループ再生の動画を敷く演出です。静止画よりも印象的でサービスの雰囲気を伝えやすい一方、動画ファイルの読み込みが重くなりやすいため、スマホでは静止画に切り替えるなどの配慮が必要になることがあります。

別名

表記ゆれ：動画背景、ビデオ背景、背景動画、video background

呼び方による意味の違いはほとんどなく、いずれも背景として動画を使う演出全般を指します。

AI への伝え方

「背景に動画をループ再生して」で通じます。<video> 要素には autoplay muted loop playsinline の 4 つの属性が基本セットになります。音声を鳴らさない muted を付けないとブラウザが自動再生をブロックすることがあるため必須です。動画を読み込む前に表示する画像（poster 属性）を指定しておくと、読み込み中の表示が安定します。動きに敏感な人への配慮として、prefers-reduced-motion が有効な環境では再生を止める（または静止画に切り替える）実装にするのが望ましいです。

似たパーツとの違い

「ヒーローセクション」は画面上部の導入部分そのものを指す言葉で、動画背景はその背景に使う演出の選択肢の一つです。背景をグラデーションや静止画にする場合との使い分けとして、動きで印象付けたいときに動画背景が選ばれます。

デモ

コード

HTML

<div class="video-background-demo">
  <!--
    実際のページでは <video> 要素を背景として敷きます。外部の動画ファイルは用意していないため、
    このデモでは CSS アニメーションで動くグラデーションを <video> の代わりに表示しています。

    <video class="video-background-demo__video" autoplay muted loop playsinline poster="poster.jpg">
      <source src="background.mp4" type="video/mp4" />
    </video>
  -->
  <div class="video-background-demo__bg" aria-hidden="true"></div>
  <div class="video-background-demo__overlay" aria-hidden="true"></div>
  <div class="video-background-demo__content">
    <h2 class="video-background-demo__heading">動画のような背景</h2>
    <p class="video-background-demo__text">
      ゆっくり動くグラデーションで、動画背景の雰囲気を再現しています。
    </p>
  </div>
</div>

CSS

.video-background-demo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 48px);
  overflow: hidden;
  color: #ffffff;
  text-align: center;
  font-family: sans-serif;
}

.video-background-demo__bg {
  position: absolute;
  inset: -20%;
  background: linear-gradient(120deg, #0017c1, #333333, #666666, #0017c1);
  background-size: 300% 300%;
  animation: video-background-demo-move 12s ease infinite;
}

.video-background-demo__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.video-background-demo__content {
  position: relative;
  max-width: 420px;
  padding: 24px;
}

.video-background-demo__heading {
  margin: 0 0 12px;
  font-size: 22px;
}

.video-background-demo__text {
  margin: 0;
  line-height: 1.8;
}

@keyframes video-background-demo-move {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-background-demo__bg {
    animation: none;
    background-position: 50% 50%;
  }
}