Video Background là gì?
Giống như Image Background thì Video Background có nghĩa là sử dụng đa phương tiện để làm nền cho một đối tượng. Ở đây đa phương tiện thay vì là Image thì nó sẽ là VideoVậy là thế nào để có được điều đó?
Sử dụng Video làm Background bằng HTML và CSS
Tạo trình phát Video
Khác với Image Background, Video là một đa phương tiện động và cần có trình phát để chạy nó. Và may mắn thay, trong HTML5 ta có thẻ video để làm điều này<video autoplay loop muted id="video-background">
<source type="video/mp4" src="<link-video>">
<source type="video/webm" src="<link-video>">
<source type="video/ogg" src="<link-video>">
</video>Chú ý các thuộc tính autoplay(tự động phát video), loop(lặp lại video nếu video kết thúc), muted(tắng tiếng video - bắt buộc trong một số trình duyệt. Nếu thuộc tính autoplay được đi kèm)
Tạo kiểu nền cho Video Background
CSS sau sẽ làm cho Video được hiển thị toàn màn hình (Tất nhiên, vì làm nền mà 😁)#background-media {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
object-fit: cover; /* Hiển thị video bảo phủ toàn trang */
z-index: -10; /* bắt buộc nếu không nó sẽ hiển thị đè lên nội dung trang */
}Tổng kết toàn bộ code
Như vậy để có được một Video Background thì ta phải dùng đến code sau<video autoplay loop muted id="video-background">
<source type="video/mp4" src="<link-video>">
<source type="video/webm" src="<link-video>">
<source type="video/ogg" src="<link-video>">
</video>
<style>
#background-media {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
object-fit: cover;
z-index: -10;
}
</style>Giải thích một số code (CSS Only)
position: fixed;Cố địch video nền, không thay đổi vị trí khi cuộnobject-fit: cover;HIển thị trong chế độ phủ toàn bộ thẻ cha (ở đây thẻ cha là thẻ body). Điều này giúp video không bị thay đổi kích thước tránh tình trạng "móp" videoz-index: -10;Làm video hiển thị "sâu" hơn nội dung của trang. Nếu không có thuộc tính này. Video sẽ che "đè" nội dung (Chỉ cần âm là được không nhất thiết phải là -10)