Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Video Background Bằng HTML CSS (Phần 2)

Cách Tạo Video Background Bằng HTML CSS (Phần 2)


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

Cách Tạo Video Background Bằng HTML CSS (Phần 2)

Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu cách thiết kế video background cho trang web được tạo bằng HTML, CSS nhé!

Nếu bạn muốn xem lại phần 1 thì tham khảo ở đây nhé!

Tạo Video Background HTML CSS

Trong phần này chúng ta sẽ đi vào tạo một trang web giới thiệu về Việt Nam thông qua việc sử dụng video background nhé!

Trước khi đi vào xây dựng video background thì bạn hãy xem kết quả cuối cùng của chúng ta ở đường dẫn bên dưới để có thể dễ hình dung hơn quá trình viết mã hơn!
Kết quả

Đầu tiên thì chúng ta sẽ đi vào tạo cấu trúc HTML và liên kết nó đến những file cần thiết để tạo video background như là Google Font, Font Awesome 4.7style.css thông qua đoạn mã bên dưới nha:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Video Background</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

Tiếp theo chúng ta sẽ đi vào xây dựng header cũng như thiết lập các thuộc tính CSS cho thẻ header, body bằng đoạn mã sau nhé:

HTML

<header>
    <a href="" class="logo">Việt Nam</a>
</header>

CSS

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
body{
    background: #111;
}
header{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 100px;
    z-index:10;
}
header .logo{
    position: relative;
    font-size: 2em;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
}

Và kết cuối cùng bạn xem ở bên dưới nhé:

Kết_quả_videobackground_phần1

Tiếp Theo chúng ta sẽ đi vào thiết kế nội dung chính cũng phân chia bố cục layout cho component bằng đoạn mã HTML và CSS ở sau đây nhé!

HTML

<div class="banner">
    <div class="noi_dung">
        <h2>Hãy Tham Quan Việt Nam</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non cupiditate labore nulla maxime qui numquam repudiandae delectus consequatur tempore alias enim ipsam quo sit suscipit, et rerum molestiae optio commodi.</p>
        <a href="">Thông Tin Thêm</a>
    </div>
    <div class="video-bg"></div>
    <ul class="icon_mang_xa_hoi">
        <li>
            <a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
        </li>
        <li>
            <a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
        </li>
        <li>
            <a href=""><i class="fa fa-google-plus-square" aria-hidden="true"></i></a>
        </li>
    </ul>
</div>

CSS

.banner{
    position: relative;
    widows: 100%;
    min-height:100vh;
    padding: 0 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.banner .noi_dung{
    position: relative;
    max-width: 550px;
    z-index: 2;
}
.banner .noi_dung h2 {
    color: #fff;
    font-size: 2.5em;
}
.banner .noi_dung p{
    color: #fff;
    font-size: 1.2em;
    margin: 5px 0px 25px;
}
.banner .noi_dung a {
    position: relative;
    display: inline-block;
    background:#fff;
    color: #111;
    padding: 15px 25px;
    text-decoration: none;
    font-size: 1.2em;
    letter-spacing: 1px;
    font-weight: 500;
}
.banner .video-bg{
    position: relative;
    background: #fff;
    margin-left: 40px;
    width:100%;
    height: 400px;
    z-index:1;
}
.banner .icon_mang_xa_hoi{
    position: absolute;
    bottom: 20px;
    letter-spacing: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner .icon_mang_xa_hoi li{
    list-style-type: none;
}
.banner .icon_mang_xa_hoi li i{
    display:inline-block;
    margin:15px;
    color:#fff;
    font-size:2.5em;
}

Và kết quả của đoạn mã trên bạn xem ở bên dưới đây nhé:

Kết_quả_videobackground_phần2

Việc tiếp theo chúng ta cần làm là thiết lập video background vào ô màu trắng trong thẻ div có class là bg-video cũng như sử dụng video này làm nền background hiển thị toàn màn hình cho trang web bằng đoạn mã sau đây nhé!

HTML

<header>
        <a href="" class="logo">Việt Nam</a>
    </header>
<div class="banner">
  /*Thêm Video Nền cho Toàn Bộ Trang*/
  <video src="https://www.dropbox.com/s/t260qcw4vwgr6lr/Beauty%20-%2035790%20%282%29.mp4?raw=1" muted autoplay loop type="mp4"></video>
     <div class="noi_dung">
         <h2>Hãy Tham Quan Việt Nam</h2>
         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non cupiditate labore nulla maxime qui numquam repudiandae delectus consequatur tempore alias enim ipsam quo sit suscipit, et rerum molestiae optio commodi.</p>
         <a href="">Thông Tin Thêm</a>
     </div>
    <div class="video-bg">
      /*Thêm video cho thẻ div class video-bg*/
       <video src="https://www.dropbox.com/s/t260qcw4vwgr6lr/Beauty%20-%2035790%20%282%29.mp4?raw=1" muted autoplay loop type="mp4"></video>
    </div>
    <ul class="icon_mang_xa_hoi">
         <li>
             <a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
         </li>
         <li>
             <a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
         </li>
         <li>
             <a href=""><i class="fa fa-google-plus-square" aria-hidden="true"></i></a>
         </li>
     </ul>
 </div>

CSS

.banner .video-bg video{
    opacity: 1;
}
.banner:before{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width:400px;
    height:100%;
    background:#000;
    opacity: 0.8;
}
.banner video{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
    opacity: 0.1;
    pointer-events: none;
}

Và kết quả cuối cùng của chúng ta là:

Kết_quả_videobackground_phần3

Ở đây thì chúng ta còn một vấn đề nữa đó là việc hiển thị responsive trên những màn hình thiết bị điện thoại có kích thước nhỏ. Để dễ hình dung lỗi này hơn thì bạn xem ảnh dưới đây nhé:

Kết_quả_videobackground_phần4

Bây giờ chúng ta sẽ dùng CSS để viết lại cách nó hiển thị trên những màn hình có kích thước nhỏ nhé!

@media (max-width: 991px){
    header{
        padding: 20px 50px;
    }
    .banner{
        padding: 150px 50px 0;
        flex-direction: column;
    }
    .banner:before{
        display:none;
    }
    .banner .noi_dung{
        max-width: 100%;
    }
    .banner .text-Box h2{
        font-size:2.5em;
    }
    .banner .video-bg{
        width:100%;
        height: 150px;
        margin: 80px;
    }
}

Và kết quả cuối cùng của chúng ta là:

See the Pen Tạo Video Background by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bạn chuyển chuyển sang chế độ screen 0.5x hay 0.25x để thấy rõ hơn nhé!

Tổng kết:

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

author image

Mình là Thái Viết Nhật. Mình có ước mơ là có thể làm các bài giảng miễn phí và chia sẻ những bài viết, công cụ hữu ích dành cho thiết kế, phát triển website.

Mong bạn ủng hộ trang web để mình có thêm kinh phí phát triển và viết thêm nhiều bài về lập trình web hơn nữa nha. Xin chân thành cảm ơn.