How To Add Video As Background In Html

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 groundwork 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 groundwork 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 ii – Menyisipkan Video Menggunakan HTML5

Selanjutnya buatlah sebuah file HTML, misal alphabetize.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="mode.css">     </caput>     <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 form="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 groundwork dan desain lainnya agar nantinya background video tampil full screen. Buatlah sebuah file CSS, misal mode.css kemudian tuliskan perintah CSS berikut ini :

* {     box-sizing: border-box; }  body {     margin: 0;     padding: 0; }  .content {     margin: 0 motorcar;     width: 100%;     max-width: 960px;     padding: 0 15px; }  h1 {     margin: 60px 0;     padding: 0;     font-size: 50px;     text-align: heart; }  p {     margin: 0 0 30px 0;     font-size: 30px;     line-height: ane.5; }  .fullscreen-bg {     position: stock-still;     acme: 0;     right: 0;     lesser: 0;     left: 0;     overflow: subconscious;     z-index: -100; }  .bg-video {     position: absolute;     top: 0;     left: 0;     width: 100%;     height: 100%; }  @media (min-attribute-ratio: 16/ix) {     .bg-video {         height: 300%;         top: -100%;     } }  @media (max-aspect-ratio: 16/nine) {     .bg-video {         width: 300%;         left: -100%;     } }  @media (max-width: 767px) {     .fullscreen-bg {         groundwork: url('poster.jpg') eye 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 way.

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.