Hướng dẫn background video css - video nền css

Hiển thị poster thay thế 3 phút đọc

Sử dụng @media là cách cơ bản nhất giúp chúng ta tác động lên các thành phần của trang phù hợp với từng kích thước màn hình. Trước hết, chúng ta cần cấu trúc lại html như sau:

• Video tự động chạy
• Hiển thị toàn màn hình
• Làm nổi nội dung
• Hiển thị poster thay thế khi màn hình nhỏ hơn 768px

Vậy nếu không sử dụng plugin, chúng ta sẽ giải quyết vấn đề này như thế nào?

Video tự động chạy

Qua rồi cái thời chúng ta phải sử dụng một plugin như flash để có thể chạy video. Phần tử trong html5 là một cách tiêu chuẩn giúp chúng ta nhúng một video vào website. 2 định dạng video phổ biến được hỗ trợ bởi hầu hết các trình duyệt hiện nay là mp4 và webm. Phần tử hỗ trợ rất nhiều phương thức và thuộc tính giúp chúng ta dễ dàng tương tác và kiểm soát hành vi của video.

<video autoplay loop muted>
    <source type="video/mp4" src="https://tinyurl.com/y5x5jmnf">
    <source type="video/webm" src="https://tinyurl.com/y6q5jxr6">
video>

Ở trên, chúng ta sử dụng 3 thuộc tính là autoplay (video tự động chạy), loop (video tự động phát lại vô hạn), muted (tắt âm thanh video)

Hiển thị toàn màn hình

Làm nổi nội dung

video {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100vh;
 object-fit: cover;
}

Làm nổi nội dung

Hiển thị poster thay thế khi màn hình nhỏ hơn 768px

Vậy nếu không sử dụng plugin, chúng ta sẽ giải quyết vấn đề này như thế nào?

Qua rồi cái thời chúng ta phải sử dụng một plugin như flash để có thể chạy video. Phần tử trong html5 là một cách tiêu chuẩn giúp chúng ta nhúng một video vào website. 2 định dạng video phổ biến được hỗ trợ bởi hầu hết các trình duyệt hiện nay là mp4 và webm. Phần tử hỗ trợ rất nhiều phương thức và thuộc tính giúp chúng ta dễ dàng tương tác và kiểm soát hành vi của video.

<section id="hero">
  <video id="heroVideoBg" autoplay loop muted>
    <source type="video/mp4" src="https://tinyurl.com/y5x5jmnf">
    <source type="video/webm" src="https://tinyurl.com/y6q5jxr6">
  video>
  <img id="heroImgBg" src="https://tinyurl.com/y5gkrvxm" alt="storm">
  <div id="heroContent">
    <h2>Get ricky!h2>
    <h2>We make it awesomeh2>
  div>
section>

Ở trên, chúng ta sử dụng 3 thuộc tính là autoplay (video tự động chạy), loop (video tự động phát lại vô hạn), muted (tắt âm thanh video)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  
  #heroVideoBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    display: none;
    @media (min-width: 768px) {
      display: inline-block;
    }
  }
  #heroImgBg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    @media (min-width: 768px) {
      display: none;
    }
  }
  #heroContent {
    text-align: center;
    padding-top: 100px;
  }
}

Phần tử cũng tương tự như phần tử . Mặc định nó sẽ hiển thị theo kích thước và tỉ lệ gốc. Để hiển thị full size mà không phá vỡ tỉ lệ khung hình, chúng ta style như sau:

Đây không phải là vấn đề khó khăn gì khi bạn hiểu một chút về Stacking context trong css. 2 yếu tố cơ bản trong đó là: Các phần tử có position khác static luôn được ưu tiên hiển thị phía trên; theo sau đó, các phần tử sẽ được xét lại độ ưu tiên dựa vào thuộc tính z-index. Như vậy chúng ta chỉ cần thêm thuộc tính z-index: -1; vào phần style phía trên. Những phần nội dung tiếp được thêm vào sẽ luôn hiển thị phía trên video.