Sticky Floating Video (jQuery)

Sticky Floating Video (jQuery)

Salah satu komponen penting yang bisa diterapkan dalam membuat website agar lebih user friendly adalah dengan membuat fitur sticky. Fitur sticky sendiri bervariasi mulai dari yang umum yaitu pembuatan sticky navigasi, hingga yang sedang tren saat ini adalah membuat sticky video.

Pada tulisan ini akan dibahas seputar sticky video, yang akan dilengkapi dengan skrip kode HTML, CSS dan serta JavaScript dipadukan dengan jQuery sebagai aktivasi.

Fitur sticky video sudah dapat dijumpai pada situs jejaring sosial Facebook dan tidak mau ketinggalan situs YouTube ikut mengadopsi fitur ini.

Dengan menggunakan fitur ini, pengunjung web secara bersamaan dapat melihat isi web dan tanpa ketinggalan streaming video yang sedang dimainkan. Video akan menyusut(mengecil) pada saat halaman digulir (scroll) kebawah, sehingga baik isi konten web dan video secara bersamaan dapat dinikmati.

Berikut ini ada beberapa hal yang harus dipersiapkan untuk membuat efek floating video, diantaranya adalah sebagai berikut:
1) HTML (index.html)
2) CSS (style.css, normalize.css)
3) JavaScript (Library jQuery)

File index.html

File style.css

Skrip JavaScript, disini disisipkan pada badan web atau tag HTML BODY

Skrip secara keseluruhan sebagai berikut:

Pada dasarnya tujuan penulisan skrip ini adalah agar teman-teman memahami apa itu konsep float CSS, yang pada dasarnya nanti akan dijadikan point paling penting dalam pembuatan efek sticky video ini.

Catatan:
File pendukung, dapat diambil disini:
1. https://necolas.github.io/normalize.css/8.0.1/normalize.css
2. https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js