使用純 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 的介紹可以看這篇,這樣就完成了。

實際的範例可以參考這頁

 

課程推薦

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。