The Soda Pop

CuDemVN.Wap.Sh

- 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

Admin* 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
↑↑ Lượt xem: 281
score
Đánh giá: 4.5/ 5, 281 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-281]