Background Video thật đơn giản

Xin chào mình là Danh hôm nay mình xin chia sẽ với các bạn cách tạo giao diện Font End.

Giao diện ấn tượng là giao diện sinh động màu sắc hòa hợp giúp trải nghiệm người dùng tốt hơn.

Background là một phần quan trọng của giao diện một background đẹp sẽ giúp các content trong web được nổi bật.

Đây là option đáng để bạn thử vì nó tạo cảm giác trang web của bạn sống động hơn hút mắt hơn.

Background video vừa đẹp, đơn giản chỉ với HTML, CSS là bạn hoàn toàng có thể tạo giao diện đẹp.

Khởi tạo project

Bước đầu tiên chúng ta sẽ setup file thì như trên mình đã nói là chỉ cần html và css.

nên file chúng ta chỉ cần 2 file là html và css và 1 folder để hình và video

Folder project

Oke vậy là đã xong bước setup file. sau đó chúng ta sẽ vào phần code đầu tiên

Code HTML & CSS

  • chúng ta sẽ tạo 1 thẻ bao bọc toàn bộ phần giao diện và code html và css như sau
<div class="container">

</div>
  • code css của phần khung
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3));
  position: relative;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: center;
}

Tiếp theo chúng ta sẽ làm phần navbar nhé code html và css của phần navbar như sau:

<nav>
        <img src="image/images-removebg-preview.png" class="logo" />
        <ul>
          <li>
            <a href="#">Home</a>
            <a href="#">HTML</a>
            <a href="#">CSS</a>
            <a href="#">JS</a>
          </li>
        </ul>
      </nav>
nav {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px 8%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav .logo {
  width: 80px;
}
nav ul li {
  list-style: none;
  display: inline-block;
  margin-left: 40px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 17px;
}

Tiếp theo là phần content thì ở đâu mình chỉ làm đơn giản thôi còn các bạn có thể sáng tạo thêm để cho giao diện được bắt mắt hơn và code như bên dưới

      <div class="content">
        <h1>Binh Thuan Beach</h1>
        <a href="#">Explore</a>
      </div>
.content {
  text-align: center;
}
.content h1 {
  font-size: 160px;
  color: #fff;
  font-weight: 600;
  transition: 0.5s;
}
.content h1:hover {
  -webkit-text-stroke: 2px #fff !important;
  color: transparent;
}
.content a {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-size: 24px;
  border: 2px solid #fff;
  padding: 14px 70px;
  border-radius: 50px;
  margin-top: 20px;
}

Oke và bây giờ là phần quan trọng nhất đó là làm 1 cái background bằng video ở đây video cần các thuộc tính như tự động chạy video và lặp lại liên tục thứ 2 không có âm thanh và phải phát video ngay tại vị trí đó ở đây mình dùng thuộc tính: autoplay loop muted plays-inline để có thể làm được những yêu cầu trên. Các bạn xem tham khảo code bên dưới.

      <video autoplay loop muted plays-inline class="back-video">
        <source
          src="image/[Flycam Phan Thiet] Những bãi biển đẹp ở Bình Thuận.mp4"
          type="video/mp4"
        />
      </video>
.back-video {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
}

@media (min-aspect-ratio: 16/9) {
  .back-video {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  .back-video {
    width: auto;
    height: 100%;
  }
}

Oke và chúng ta sẽ có 1 giao diện cực đẹp và cách làm thật đơn giản

Các bạn có thắc mắc hoặc đóng góp xin gửi qua email [email protected], cảm ơn các bạn đã đọc.

Leave a Comment

Your email address will not be published. Required fields are marked *