Cara menambahkan background atau latar belakang website berupa video pada html & css

Hallo teman-teman, salam jumpa kembali…

Pada artikel kali ini penulis ingin membahas tutorial Cara menambahkan background atau latar belakang website berupa video pada html & css. Langsung aja ya kita bahas cara pembuatannya…

Cara menambahkan background atau latar belakang website berupa video pada html & css. Pada pembahasan artikel sebelumnya Pembuatan button animasi menggunakan css transition, penulis membahas bagaimana cara membuat button animasi. Nah sekarang kelanjutan artikel sebelumnya, dimana penulis akan menambahkan background atau latar belakang pada website sebelumnya. Oke langsung aja ya…

1. Teman-teman salin codingan dibawah ini, kemudian paste ke text editor yang biasa teman-teman pakai.

<!DOCTYPE html>
<html>
<head>
<style>
* {padding: 0; margin: 0;}

body {
  width: 100%;
  margin: auto;
}

.container {
	background-color: blue;
  text-align: center;
}

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: orange;
  border: none;
  color: white; 
  font-size: 28px;
  padding: 20px;
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: 'dumetschool.com';
  font-size: 11px;
  color: white;
  position: absolute;
  opacity: 0;
  top: 30px;
  right: 0px;
  transition: 0.5s;
}

.button:hover {
  background-color: blue;
  color: white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.button:hover span {
  padding-right: 30px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

input[type=submit] {
  background-color: orange;
  border-radius: 5px;
  border: none;
  color: white;
  cursor: pointer;
  transition: 0,5s;

}
input[type=submit]:hover {
  background-color: blue;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.bg {
  background-color: black;
}
.bg video {
  width: 100%;
  margin: auto;
}

</style>
</head>
<body>
<div class="container">
<button class="button" style="vertical-align:middle"><span>Home</span></button>
<button class="button" style="vertical-align:middle"><span>Gallery</span></button>
<button class="button" style="vertical-align:middle"><span>Company</span></button>
<button class="button" style="vertical-align:middle"><span>Location</span></button>
<button class="button" style="vertical-align:middle"><span>Contact</span></button>
<input type="text" placeholder="Search" style="width: 200px; padding: 10px; margin: 5px;">
<input type="submit" value="GO" style="padding: 10px; margin: 5px;">

</div>
  <div class="container-fluid bg">
      <video src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Shore-Aerial-Sequence.mp4" autoplay="true" loop="true" muted="true"></video> 
</div>

</body>
</html>

Cara menambahkan background atau latar belakang website berupa video pada html & css

Pada tag :

<video src="https://s3-us-west-2.amazonaws.com/coverr/mp4/Shore-Aerial-Sequence.mp4" autoplay="true" loop="true" muted="true"></video>

Cara menambahkan background atau latar belakang website berupa video pada html & css

Untuk src-nya atau alamat dari tempat video, teman-teman boleh ambil dari internet atau video dari komputer teman-teman sendiri.

Nah untuk pengaturan css nya, teman-teman bisa lihat pada properties css ini :

.bg {
  background-color: black;
}
.bg video {
  width: 100%;
  margin: auto;
}

Cara menambahkan background atau latar belakang website berupa video pada html & css

Kenapa penulis memberikan lebar atau width video 100% ?

Fungsinya, agar saat browser di zoom atau dikecilkan ukuran video background tidak berubah atau tetap 100%.

Untuk hasil outputnya, kira-kira seperti ini teman-teman :

Cara menambahkan background atau latar belakang website berupa video pada html & css

Begitulah kira-kira cara pembuatannya teman-teman, mudah-kan… ^_^

Selamat mencoba ya teman-teman…