Menu
GIỚI THIỆU
  • 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ấy video làm background với html5 và css đơn giản.

Lấy video làm background với html5 và css đơn giản

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 website. 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ấy video làm background với html5 và css đơn giản.

Lấy video làm background với html5 và css đơn giản
Lấy video làm background với html5 và css đơn giản

Nội dung bao gồm

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;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.

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Lấy video làm background với html5 và css đơn giản

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha