Thông thường, để tạo nền cho web, chúng ta thường dùng hình ảnh hoặc màu sắc. Nhưng có rất ít người biết rằng, chúng ta cũng hoàn toàn có thể lấy video làm nền cho web. Chỉ với một đoạn css cơ bản cùng với sự hỗ trợ của HTML5 là chúng ta có thể làm được điều này.
HTML
Trước tiên chúng ta cần lấy video để làm background như sau :
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted volume="0">
<source src="videos/tunnel_animation.webm" type="video/webm"/>
<source src="videos/tunnel_animation.ogv" type="video/ogg ogv"; codecs="theora, vorbis"/>
<source src="videos/tunnel_animation.mp4" type="video/mp4"/>
</video>
Các bạn thấy trong đoạn html bên trên, video của chúng ta được lưu dưới nhiều định dạng khác nhau, việc này sẽ giúp chúng ta hiển thị được video trên nhiều trình duyệt khác nhau.
CSS
Và để video có thể làm background cho toàn bộ web, thì các bạn cần copy đoạn css sau :
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
Trong đoạn css bên trên, position: absolute sẽ cho phép chúng ta neo giữ video từ vị trí bottom – right của trình duyệt. Các bạn cũng có thể thay đổi vị trí top -left nếu muốn. Với việc khai báo width: auto; height: auto; và min-width: 100%; min-height: 100% thì video của chúng ta sẽ luôn luôn có kích thước vừa vặn cả về chiều ngang lẫn chiều dọc. Quan trọng nhất là chúng ta phải đặt thuộc tính z-index: -1000px; để đảm bảo video của chúng ta luôn luôn đứng sau tất cả mọi phần tử.
Thế là xong, và bây giờ các bạn đã có thể biết được cách lấy video làm background rồi phải không ? Mình mong là với bài viết này sẽ giúp ích được nhiều cho các bạn trong các dự án web của mình.
Trong đoạn css bên trên, position: absolute sẽ cho phép chúng ta neo giữ video từ vị trí bottom – right của trình duyệt. Các bạn cũng có thể thay đổi vị trí top -left nếu muốn. Với việc khai báo width: auto; height: auto; và min-width: 100%; min-height: 100% thì video của chúng ta sẽ luôn luôn có kích thước vừa vặn cả về chiều ngang lẫn chiều dọc. Quan trọng nhất là chúng ta phải đặt thuộc tính z-index: -1000px; để đảm bảo video của chúng ta luôn luôn đứng sau tất cả mọi phần tử.
Thế là xong, và bây giờ các bạn đã có thể biết được cách lấy video làm background rồi phải không ? Mình mong là với bài viết này sẽ giúp ích được nhiều cho các bạn trong các dự án web của mình.