使用 CSS 製作全螢幕背景播放影片

分享:

如果要在網頁上製作可以自動播放的全螢幕背景影片,可以參考以下做法,首先準備類似的 html:

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

這裡注意 video 一定要設定 muted 才有辦法 autoplay,接著設定 CSS,我把 .page 設定成跟螢幕一樣大:

.page{
  height: 100vh;
  position: relative;
}

 

接著設定 CSS 讓影片跟容器一樣大:

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

這邊注意雖然我們用 inset: 0 可以讓區塊佔滿整個空間,可是在 video 還是要靠 width: 100% 和 height: 100% 才會有效果,最後再加上 object-fit: cover 就大功告成了。

 

 

課程推薦

和我們交流

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