Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Video Background Bằng CSS Và Javascript Cho Trang Web Năm 2020

Tạo Video Background Bằng CSS Và Javascript Cho Trang Web Năm 2020


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

Tạo Video Background Bằng CSS Và Javascript Cho Trang Web Năm 2020

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu những cách thức để tạo được một video background đẹp cho trang web từ cơ bản đến nâng cao. Mong nó sẽ giúp ích cho bạn trong việc phát triển và thiết kế web. Nào hãy cùng mình đi vào tìm hiểu nhé!

Cách tạo video background bằng HTML và CSS

Thông thường để áp dụng cho nhiều dự án web khác nhau thì chúng ta cần tạo video background mà không nên sử dụng thư viện vì nó có thể giảm hiệu suất của trang web cũng như gây khó khăn trong việc chỉnh sửa. Nên bây giờ chúng ta hãy cùng nhau đi làm thử một video background bằng HTML và CSS nhé!

Bước 1: Xây dựng thẻ video trong HTML5:

Thẻ <video> giúp chúng ta có thể hiển thị video trên trang HTML và hỗ trợ 3 file chính là MP4, WebM và Ogg. Bây giờ chúng ta sẽ gọi thẻ này trong trang HTML nhé:

 <video playsinline autoplay muted loop>
<source src="https://res.cloudinary.com/dn4nxz7f0/video/upload/v1594348575/Pexels_Videos_1093655_pr26ax.mp4" type="video/mp4">
</video>

Ở đây mình sẽ giải thích một tý về các thuộc tính của nó nhé:

  • source: là nơi bạn xác định video được lưu trữ và khai báo loại định dạng cho video.
  • muted: là thuộc tính dùng để xác định video không phát âm thanh trong trang web.
  • playsinline: là thuộc tính để bạn có thể phát toàn màn hình video trên IOS.
  • autoplay: tự động phát video khi trang được tải.
  • loop: sẽ tự động phát lại khi video kết thúc.

Bước 2: Thiết lập CSS cho thẻ <video>:

Tiếp theo chúng ta sẽ thiết lập các thuộc tính CSS để tạo video background cho trang web:

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

Ở đây mình có một lưu ý nhỏ là thuộc tính object-fit:cover. Nó giúp thay đổi kích thước của hình ảnh hay video để có thể phù hợp với chiều rộng cũng như chiều dài của thẻ chứa nó. Và đây là kết quả của hai đoạn code trên nhé:

See the Pen Cách tạo video background bằng HTML và CSS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Thiết Lập Video Background Với Nội Dung

Thông thường chúng ta sẽ cần video background để có thể làm nổi bật nội dung nào đó để thu hút sự chú ý của người dùng tới thông điệp mà ta muốn nhấn mạnh.

Bước 1: Thêm thẻ <video> và nội dung:

 <video playsinline autoplay muted loop>
  <source src="https://res.cloudinary.com/dn4nxz7f0/video/upload/v1594348575/Pexels_Videos_1093655_pr26ax.mp4" type="video/mp4">
</video>
<header class="noi_dung">
  <h1>
    Niềm Vui Lập Trình
  </h1>
</header>

Bước 2: Thêm thuộc tính CSS cho thẻ <video> và nội dung :

video {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  object-fit: cover;
}
.noi_dung {
  position: relative;
  height: 100vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
  color: CornflowerBlue;
  text-transform: uppercase;
  letter-spacing: 1vw;
  line-height: 1.2;
  font-size: 3vw;
  text-align: center;
}

Và sau khi thiết lập xong thì bạn có thể thêm kết quả bên dưới đây nhé:

See the Pen Thiết Lập Video Background Với Nội Dung by haycuoilennao19 (@haycuoilennao19) on CodePen.

Cách Thêm Các Nút Điều Khiển Cho Video Background

Để nâng cao trải nghiệm người dùng thì bạn có thể thêm một số nút điều khiển video thông qua việc sử dụng Javascript với video background. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

Bước 1: Tạo cấu trúc HTML cho video background:

 <!-- Gọi thẻ video  -->
 <video playsinline autoplay muted loop id="video">
   <source src="https://res.cloudinary.com/dn4nxz7f0/video/upload/v1594348575/Pexels_Videos_1093655_pr26ax.mp4" type="video/mp4">
 </video>
 <!-- Xây dựng nội dung và nút điều khiển cho trang web-->
 <div class="noi_dung">
   <h1>Niềm Vui Lập Trình</h1>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged </p>
   <!-- Thêm nút điều khiển dừng hay phát âm thanh -->
   <button id="myBtn" onclick="myFunction()">Dừng </button>
 </div>

Bước 2: Thiết Lập CSS cho video background:

/*Thiết lập video toàn màn hình*/
#video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
/*Thêm một số nội dung phía dưới video */
.noi_dung {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}
/* thiết kế nút  */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}
/*hiệu ứng hover cho nút*/
#myBtn:hover {
  background: #ddd;
  color: black;
}

Bước 3: Thiết lập Javascript để nút điều khiển hoạt động

Bước này chúng ta sẽ bắt sự kiện khi người dùng click vào nút thì sẽ thay đổi trạng thái của video với hai hàm chính là video.play(): phát video và video.pause: dừng video. Để hiểu rõ hơn bạn xem đoạn code sau nhé:

/*Lấy phần tử video*/
var video = document.getElementById("video");
/* lấy phần tử nút */
var nut = document.getElementById("myBtn");
/*thiết lập trạng thái video và nội dung hiển thị cho nút*/
function myFunction() {
  if (video.paused) {
    video.play();
    nut.innerHTML = "Dừng";
  } else {
    video.pause();
    nut.innerHTML = "Phát";
  }
}

Và kết quả bạn xem dưới đây nhé:

See the Pen Cách Thêm Các Nút Điều Khiển Cho Video Background by haycuoilennao19 (@haycuoilennao19) on CodePen.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức xây dựng 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ẻ!

Load WooCommerce Stores in 249ms!