Sekarang ini telah banyak website yang memakai video sebagai background, yang gunanya tentu saja untuk memperindah tampilan web itu.
Tetapi yang jadi masalah ialah ukuran video yang jadi background itu. Bila ukuranya besar maka user yang mempunyai koneksi internet yang tidak cepat tidak bisa melihat background itu. Saya sarankan untuk memakai video dengan fps nya sedikit dan berulang ulang atau juga dengan tidak memakai suara seperti di mediaboom.com. Langsung saja bila kamu mau membuat video sebagai background web berikut langkah-langkahnya.
Cara Membuat Video jadi Background Website
Disini saya memakai tag <video></video> yang ada di HTML 5, jadi cuma user dengan browser paling baru atau yang telah support HTML5 saja yang bisa menatapnya.
1. Pertama sediakan terlebih dulu video yang mau dijadikan background untuk formatnya bisa mp4, webBg, atau juga ogg.
2. Berikut kode CSS yang harus di tambahkan:
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%3C%2Fspan%3E%0A%0A%3Cspan%20style%3D%22font-family%3A%20'verdana'%20%2C%20sans-serif%3B%22%3E%0Abody%7Bmargin%3A0%3Bbackground%3A%23000%7D%0Avideo%7Bposition%3Afixed%3Btop%3A50%25%3B%0Aleft%3A50%25%3Bmin-width%3A100%25%3B%0Amin-height%3A100%25%3B%0Awidth%3Aauto%3B%0Aheight%3Aauto%3B%0Az-index%3A-100%3B%0A-webkit-transform%3AtranslateX(-50%25)%20translateY(-50%25)%3B%0Atransform%3AtranslateX(-50%25)%20translateY(-50%25)%3B%0Abackground%3Aurl(%3Cb%3Ealamat%20gambar%20background%20alternatif%3C%2Fb%3E)%0A%20no-repeat%3Bbackground-size%3Acover%3B%0A-webkit-transition%3A1s%20opacity%3Btransition%3A1s%20opacity%7D%0A%7D%3C%2Fspan%3E%0A%0A%3Cspan%20style%3D%22font-family%3A%20'verdana'%20%2C%20sans-serif%3B%22%3E%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
Pada kode diatas kita mengatur posisi pada tag video yang akan jadi background website.
3. Berikutnya tinggal memanggil video yang mau di pakai sebagai background, kamu bisa menyisipkan kode berikut diantara tag Body.
<video autoplay loop poster="<b>alamat gambar background alternatif</b>" > <source src="alamat video " type="video/mp4"> </video>
Ganti alamat background gambar dan alamat video sesuai dengan tempat penyimpanan gambar dan video. Kode <video autoplay loop poster=”alamat gambar background alternatif” > berfungsi sebagai alternatif background saat video tidak muncul.
Oke sekian tutorial singkat tentang Cara Membuat Video Jadi Background Website Memakai html 5.
