Cara Membuat Video menjadi Background Website
DAFTAR ISI

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="&lt;style&gt;" title="&lt;style&gt;" />

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.
Baca Juga:  Squirrel, Aplikasi Chatting Buatan Yahoo ini Siap Jadi Kompetitor WhatsApp

Ebook Gratis!!

Subscribe untuk dapatkan e-book GRATIS dan informasi teknologi terbaru dan diskon menarik langsung di Email-mu

Taufiq
Taufiq
Digital Strategist & System Analyst. Passion dalam teknologi terutama dalam pengembangan aplikasi. Selain itu senang mempelajari digital marketing dan bisnis.
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
WhatsApp chat