Cara menambahkan background atau latar belakang website berupa video pada html css
Hallo teman-teman, salam jumpa kembali…
Di artikel kali ini penulis ingin membahas panduan Cara menambahkan background atau latar belakang laman berupa video di html css. Seketika aja ya kita bahas cara pembuatannya…
Cara menambahkan background atau latar belakang laman berupa video di html css. Di pembahasan artikel sebelumnya Perancangan button animasi menggunakan css transition, penulis membahas bagaimana cara merancang button animasi. Nah kini kelanjutan artikel sebelumnya, dimana penulis akan menambahkan background atau latar belakang di laman sebelumnya. Oke seketika aja ya…
- Teman-teman salin codingan dibawah ini, kemudian paste ke text editor yang lazim teman-teman gunakan.
<!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: 'sourcecodeaplikasi.info';
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 laman berupa video di html css
Di 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 laman berupa video di html css
Bagi src-nya atau domisili dari tempat video, teman-teman boleh ambil dari internet atau video dari komputer teman-teman sendiri.
Nah bagi pengaturan css nya, teman-teman dapat lihat di properties css ini :
.bg {
background-color: black;
}
.bg video {
width: 100%;
margin: auto;
}Cara menambahkan background atau latar belakang laman berupa video di html css
Kenapa penulis memberikan lebar atau width video 100% ?
Fungsinya, agar dikala browser di zoom atau dikecilkan ukuran video background tak berubah atau tetap 100%.
Bagi hasil outputnya, kira-kira seperti ini teman-teman :
Cara menambahkan background atau latar belakang laman berupa video di html css
Begitulah kira-kira cara pembuatannya teman-teman, mudah-kan… ^_^
Selamat mencoba ya teman-teman…
Sumber https://kursuswebsite.org
