Membuat Background Video Pada Website Dengan CSS

CSS, Tutorial - 20 May 2020

Ketika berselancar di internet pernahkah Anda melihat sebuah website yang backgroundnya ternyata berisi video ?! Nah, saat ini sangat banyak desain website yang menerapkan video sebagai background utama dari website tersebut.

Tujuannya jelas, yaitu menjadikan desain website semakin menarik dan dinamis. Sehingga pengunjung website tidak bosan dan akan menambah nilai plus dari website kita. Untuk lebih memahami, silakan lihat demo berikut terlebih dahulu.

Berikut tutorial lengkap cara membuat background video pada website dengan CSS.

Langkah 1 – Siapkan Video

Langkah pertama, siapkan terlebih dahulu video yang akan Anda jadikan sebagai background website. Disarankan format video yang akan digunakan yaitu format mp4, webm, atau juga ogg.

Sebagai contoh, pada tutorial berikut kita akan menggunakan sebuah video dengan format mp4. Anda dapat menggunakan dan mendownload video contoh pada lampiran file download yang sudah di sediakan.

Langkah 2 – Menyisipkan Video Menggunakan HTML5

Selanjutnya buatlah sebuah file HTML, misal index.html. Pada file ini kita akan meyisipkan video menggunakan perintah HTML5. Kode lengkapnya seperti berikut :

<!doctype html>
<html>
    <head>
        <title>Background Video</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
	    <div class="fullscreen-bg">
	        <video loop muted autoplay poster="poster.jpg" class="fullscreen-bg__video">
	            <source src="video.mp4" type="video/mp4">
	        </video>
	    </div>

	    <div class="content">
	        <h1>Membuat Background Video</h1>
	        <p>Background halaman ini dibuat dengan video.</p>
	    </div>
    </body>
</html>

Perhatikan kode diatas, pada perintah <video>, silakan sesuaikan dengan nama file video Anda.

Langkah 3 – Menambahkan Perintah CSS

Terakhir, kita akan menambahkan perintah CSS untuk mengatur tata letak background dan desain lainnya agar nantinya background video tampil full screen. Buatlah sebuah file CSS, misal style.css kemudian tuliskan perintah CSS berikut ini :

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
}

.content {
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
    padding: 0 15px;
}

h1 {
    margin: 60px 0;
    padding: 0;
    font-size: 50px;
    text-align: center;
}

p {
    margin: 0 0 30px 0;
    font-size: 30px;
    line-height: 1.5;
}

.fullscreen-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (min-aspect-ratio: 16/9) {
    .bg-video {
        height: 300%;
        top: -100%;
    }
}

@media (max-aspect-ratio: 16/9) {
    .bg-video {
        width: 300%;
        left: -100%;
    }
}

@media (max-width: 767px) {
    .fullscreen-bg {
        background: url('poster.jpg') center center / cover no-repeat;
    }

    .bg-video {
        display: none;
    }
}

Pastikan perintah HTML dan CSS diatas telah terhubung. Anda juga dapat menuliskan perintah CSS diatas dengan cara internal style.

Simpan semua file HTML dan CSS. Kemudian cobalah untuk mengakses file index.html untuk melihat hasil background video yang telah dibuat. Bila penulisan kode Anda telah benar, maka background video yang telah dibuat akan tampil seperti demo berikut ini.

Kesimpulan

Demikian tutorial membuat background video pada website menggunakan HTML dan CSS. Ada catatan penting yang harus Anda perhatikan, yaitu pastikan durasi video dan file video tidak terlalu panjang dan besar. Dikarenakan akan sangat mempengaruhi waktu loading website ketika di akses oleh pengunjung.

Untuk itu, tampilkan video background dengan durasi yang wajar. Selamat mencoba dan semoga bermanfaat.