HTML5でサイトの背景に動画を追加する方法

HTML5でサイトの背景に動画を追加する方法

Webサイトの背景に動画を流すことで、訪問者に強い印象を与えるビジュアル体験を提供できます。HTML5の<video>要素を使えば、外部プラグインなどに頼ることなく、シンプルなコードで背景動画を実装可能です。

1. 基本となるHTMLマークアップ

まず、autoplay（自動再生）、muted（ミュート）、loop（ループ再生）の各属性を指定したvideo要素を配置します。この組み合わせにより、音声なしで繰り返し再生される背景動画になります。

<video autoplay muted loop id="myVideo">
  <source src="demo.mp4" type="video/mp4">
  お使いのブラウザはHTML5動画に対応していません。
</video>

2. CSSで画面全体に表示する

次に、CSSで動画の幅と高さを100%に設定し、サイトの背景全体を覆うようにスタイルを適用します。

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  z-index: -1;
}

3. 再生・一時停止ボタンを追加する

ユーザーが動画をコントロールできるよう、再生と一時停止を切り替えるボタンを設置しましょう。以下は動画を一時停止・再開するためのJavaScriptコード例です。

function display() {
  if (video.paused) {
    video.play();
    btn.innerHTML = "動画を一時停止";
  } else {
    video.pause();
    btn.innerHTML = "再生する";
  }
}

実装時のポイント

• autoplay： ページ読み込み時に自動的に再生が開始されます。
• muted： 多くのブラウザでは音声付き動画の自動再生がブロックされるため、必ず指定しましょう。
• loop： 動画が終了しても自動的に繰り返し再生されます。
• playsinline： iOS Safariで意図せず全画面再生になるのを防ぐために追加しておくと安心です。

以上の手順で、HTML5だけでサイト背景に動画を組み込むことができます。ファイルサイズの大きい動画はページの読み込み速度に影響するため、圧縮済みの短い動画を使用することをおすすめします。