Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
11 Video background CSS Đẹp Cho Trang Web

11 Video background CSS Đẹp Cho Trang Web


Ngày 9 Tháng 7 Năm 2020

Với sự phát triển web ngày càng hiện đại thì để đáp ứng nhu cầu trải nghiệm của người dùng cũng như làm thương hiệu trang web của bạn nổi bật hơn thì hôm nay mình sẽ giới thiệu đến bạn một số ví dụ về video background được sáng tạo bởi những bạn lập trình viên tài năng trong năm 2020 nhé!

Cách Sử Dụng Video Background Cho Website

Trước khi đi vào bài thì mình có một số lưu ý khi bạn sử dụng video background cho website là:

  • Hãy cố gắng nén dung lượng video của bạn xuống mức trung bình vì sẽ giảm được thời gian load cho trang web.
  • Thời gian của video cũng không nên quá dài, chỉ khoảng 30 đến 40 giây là hợp lý rồi nhé.
  • Bạn cũng nên quan tâm đến độ tương phản màu của nội dung với background video.
  • Đảm bảo background video có thể chạy trên nhiều màn hình thiết bị. Nhưng đối với những màn hình như điện thoại thì mình nghĩ chúng ta không nên sử dụng vì thời gian tải trang web của những thiết bị này thường lâu hơn các thiết bị khác cũng như không mang lại trải nghiệm tốt cho người dùng.

Cách Tạo Video Background HTML5

Video Background HTML5

Kết quả bạn xem bên dưới nhé!

See the Pen Responsive HTML5 Background Video Demo by Angus Russell (@GusRuss89) on CodePen.

Nguồn

Cách Tạo Video Background Toàn Màn hình HTML5 CSS3

Video Background Fullscreen

Kết quả bạn xem bên dưới nhé!

See the Pen Fullscreen Video Background Demo by Elon Zito (@simsketch) on CodePen.

Nguồn

Cách Tạo Video Background Với Chữ Bằng CSS

Video Background Text

Kết quả bạn xem bên dưới nhé!

See the Pen Responsive Video Knockout Text (Pure CSS) by George W. Park (@GeorgePark) on CodePen.

Nguồn

Thiết Kế Video Background CSS Javascript

Video Background CSS Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Background Video by Brightcove Learning Services (@rcrooks1969) on CodePen.

Nguồn

Thiết Kế HTML5 Background Video

HTML5 Background Video

Kết quả bạn xem bên dưới nhé!

See the Pen Fullscreen HTML5 Video Background With Cover Effect by XTIAN (@xtianmiller) on CodePen.

Nguồn

Cách Tạo Background Video Cho Header

Background Video Header

Kết quả bạn xem bên dưới nhé!

See the Pen Embedded video header by Bradley Engelhardt (@SquishyAndroid) on CodePen.

Nguồn

Cách Tạo Background Video Bằng CSS Grid

Background Video CSS Grid

Kết quả bạn xem bên dưới nhé!

See the Pen Full-Screen Background Video using CSS Grid & object-fit by George W. Park (@GeorgePark) on CodePen.

Nguồn

Thiết Kế Video Background CSS

Video Background CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Full Page Video: Full Then Scroll by Chris Coyier (@chriscoyier) on CodePen.

Nguồn

Thiết Kế Video Background Với Thanh Tiêu Đề Bằng HTML CSS

Video Background Navbar

Kết quả bạn xem bên dưới nhé!

See the Pen Css: Background Video by Alain Rodriguez (@alainrodriguezz) on CodePen.

Nguồn

Thiết Kế Responsive Video Background

Responsive Video Background

Kết quả bạn xem bên dưới nhé!

See the Pen Responsive Background Video by Daniel Riemer (@zitrusfrisch) on CodePen.

Nguồn

Thiết Kế Trang Đăng Ký Với Video Background

Login Video Background

Kết quả bạn xem bên dưới nhé!

See the Pen Pure CSS Blurred Video Background Login Box. by Lokesh Suthar (@magnus16) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những ví dụ về video background hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!