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.

<body>
  <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.

4 Januari 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat