Cara Membuat Background Video pada Website
Cara Membuat Background Video pada Website - Tahun 2017 sudah berlalu, dimana pada tahun 2017 kemarin ada tren didunia website dalam hal desain, yakni tren backdround berupa video. Karena dengan menerapkan konsep seperti ini tampilan website akan semakin dinamis dan tentunya tidak bosan untuk dilihat oleh pengguna.Tentu kalian pasti ingin tahu bagaman cara membuat background video ? Nah, pada kesempatan kali ini saya akan membahas tutorial bagaimana cara membuat background video pada website.
Sebelum memualai praktek membuat background video, silahkan kalian siapkan bahan berupa video bebas untuk dijadikan background, setelah itu barulah kita menyusun sintak - sintak untuk membuat video menjadi background.
langkah 1 : Cara Membuat Background Video pada Website
Langkah pertama adalah kita akan membuat struktur dan menyisipkan videonya dengan sintak HTML 5 berikut ini.
<header class="wrapper head">
<div class="box">
<video src="Opening video.mp4" autoplay loop="true"></video>
</div>
<div class="content">
<h1>Hello World</h1>
<a href="#">Learn More</a>
</div>
</header>
</body>
pada sintak video src silahkan isikan nama videonya.
langkah 2 : Cara Membuat Background Video pada Website
Selanjutnya, setelah membuat struktur dengan HTML 5 seperti diatas, kita akan desain layout dan pengaturan lainnya agar tampilan background video menjadi full body dengan sintak CSS berikut ini.
box-sizing: border-box;
}
body {
margin: 0;
font-family: sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #333;
overflow-x: hidden;
}
.head {
height: 100vh;
display: flex;
align-items: center;
color: #fff;
}
.wrapper {
max-width: 960px;
margin: auto;
text-align: center;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
}
.box video {
min-width: 100%;
min-height: 100%;
}
.header-overlay {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 45, 1);
background: rgba(0, 0, 45, 1)
z-index: 1;
opacity: 0.85;
}
.content {
z-index: 99;
width: 400px;
margin: auto;
}
.content h1{
font-size: 50px;
}
a {
border: 2px solid #f90;
color: #fff;
font-size: 1.2rem;
padding: 10px;
text-decoration: none;
}
Pastikan file HTML 5 dan CSS sudah terhubung atau bisa menuliskan sintak CSS dengan cara internal style. Setelah semua sintak telah diketikan, selanjutnya simpan filenya kemudian silahkan buka pada browser masin - masing dan lihat hasilnya.
Bagaimana, cukup mudah bukan untuk membuat video menjadi background ? Baik, cukup sekian tutorial bagaimana cara membuat background video pada website, semoga bermanfaat.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
