CSS 的 video 標簽覆蓋是一種常見的技術,可以讓用戶無感知地點擊視頻上方的元素,實現更好的用戶體驗。
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
如上代碼所示,我們需要將 video 標簽設置為絕對定位,使其覆蓋在頁面內容之上。同時,將 z-index 設為 -1,使其位于所有其他元素之下。
接下來,我們可以在 video 標簽之上創建一個覆蓋層,通過設置它的寬高為 100%,將其覆蓋在 video 標簽之上。最后,將 z-index 設為 1,使其位于 video 標簽之上。
這樣,我們就可以通過覆蓋層來實現對 video 標簽的覆蓋,同時保持視頻播放的正常運行。