Raja Kode - Vidage.js adalah JavaScript library ringan yang memungkinkan video HTML5 digunakan sebagai latar belakang halaman web atau blog Kamu.
Plugin ini juga memiliki fallback yang menggunakan gambar latar layar penuh alih-alih video untuk menghemat bandwidth di perangkat seluler.
Cara memasang & menggunakannnya:
1. Pasang JavaScript dan CSS:
<link href="Vidage.css" rel="stylesheet"> <script src="Vidage.min.js"></script>
2. Siapkan gambar fallback dan atur path yang benar di Vidage.css.
.Vidage__image{background-image:url(bg.jpg);
3. Masukan video HTML5 ke latar belakang di halaman web Anda.
<div class="vidage">
<video id="vidage" class="vidage-video" preload="metadata" loop autoplay muted>
<source src="bg.webm" type="video/webm">
<source src="bg.mp4" type="video/mp4">
</video>
</div>
4. Inisialisasi Vidage dan selesai.
new Vidage('#VidageVideo');
5. Ganti gambar fallback default.
.vidage::before {
background-image: url('bg.jpg');
}
Changelog:
v1.0.1 (10/24/2022)
- Update