Cara Membuat Video jadi Background Website

Cara Membuat Video menjadi Background Website

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.

Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Recommended Posts

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat