GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam

AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam

HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ

Trang chủ >> WapMaster

Tìm Kiếm → Thảo Luận

Hướng dẫn lấy Video làm Background cho Wap/Web với HTML5 & CSS

RoSino18k

05-07-2016

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.

Hướng dẫn lấy Video làm Background cho Wap/Web với HTML5 & CSS
[Tải ảnh]

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 sử dụng đ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.

Nguồn: ShareCode.Vn