Saat ini sudah banyak website yang menggunakan video sebagai background, yang gunanya tentu saja untuk memperindah tampilan web tersebut. seperti beberapa web berikut :
namun yang menjadi masalah adalah ukuran video yang menjadi background tersebut. jika ukuranyya besar maka user yang memiliki koneksi internet yang tidak cepat tidak dapat melihat background tersebut. saya sarankan untuk menggunakan video dengan fps nya sedikit dan berulang ulang atau juga dengan tidak menggunakan suara seperti pada mediaboom.com. langsung saja jika anda ingin membuat video sebagai background web berikut langkah-langkahnya
Cara Membuat Video menjadi Background Website
Disini saya menggunakan tag <video></video> yang ada pada HTML 5 , jadi hanya user dengan browser terbaru atau yang sudah support HTML5 saja yang dapat melihatnya.
1. pertama siapkan terlebih dahulu video yang ingin dijadikan background untuk formatnya dapat mp4,webBg, atau juga ogg.
2. berikut kode CSS yang perlu 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 diataskita mengatur posisi pada tag video yang akan menjadi background website
3. selanjutnya tinggal memanggil video yang ingin di gunakan sebagai background, anda dapat 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” > berguna sebagai alternatif background saat video tidak muncul .
oke sekian tutorial singkat tentang Cara Membuat Video menjadi Background Website menggunakan html 5.
