網頁動態背景設定：如何以 MP4 視訊作為網頁背景

網頁動態背景設定概述

若要讓網頁背景播放 MP4 視訊，最常見的做法是使用 HTML5 的 <video> 元素，並搭配 CSS 將其固定在視窗底層，使內容區塊能正常顯示在影片之上。

基本程式碼範例

<video autoplay muted loop playsinline poster="poster.jpg">
  <source src="background.mp4" type="video/mp4">
  您的瀏覽器不支援視訊播放。
</video>

CSS 設定

video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

實作原理說明

autoplay 讓頁面載入後自動播放；muted 靜音是大多數瀏覽器允許自動播放的必要條件；loop 讓影片重複播放；playsinline 則在行動裝置上強制內嵌播放，避免跳轉全螢幕。object-fit: cover 確保影片填滿整個視窗而不變形。

請注意，自動播放的視訊背景會頻寬與效能，建議提供靜態圖片作為 poster 備援，並在行動網路中考慮是否要關閉動態背景。