Hướng dẫn background video html codepen - video nền html codepen

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é!

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é!

Xây dựng thẻ video trong HTML5

Thẻ 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é:

Ở đâ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.

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

  0: là thuộc tính để bạn có thể phát toàn màn hình video trên IOS.

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

  1: tự động phát video khi trang được tải.

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

  2: sẽ tự động phát lại khi video kết thúc.

Thiết lập CSS cho thẻ

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

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

4. 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ẻ và nội dung:

 
   
 
 
   

     Niềm Vui Lập Trình
   

 

Bước 2: Thêm thuộc tính CSS cho thẻ 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;
 }
 h2 {
   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.

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:

 
  
    
  
 
  
    
Niềm Vui Lập Trình

    
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 

    
    Dừng 
  

/*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;
 }

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

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

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

/*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";
   }
 }