使用純 CSS 製作填滿某個區塊而且可以隨區塊調整大小的背景影片(video)

利用影片當背景可以讓整個版面看起來更活潑，而在 CSS3 出來之後就可以透過 video 標籤搭配 CSS 的 object-fit 來製作可以隨著區塊大小的影片背景了。

首先我們可以準備這樣的 HTML：

<div class="container">
  <video src="video.mp4" autoplay muted loop></video>
</div>

這裡我用一個容器把 video 包起來，video 就直接設定 autoplay: 自動播放、muted: 靜音以及 loop: 循環播放，注意這邊一定要設定靜音才能夠讓影片自動播放。

接著設定 CSS:

.container{
  position: relative;
}
.container video{
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

上面那段就是利用 object-fit 讓影片可以跟著容器變化，object-fit 的介紹可以看這篇，這樣就完成了。

實際的範例可以參考這頁