Cara Video Floating Sticky Saat Scroll di Blog

"Membuat tampilan widget Video melayang saat scroll di Blog kita seperti Youtube dan situs streaming Video Film lainnya. Penasaran? yuk disimak!"

YZG 11 April 0

Pastinya kita sering membuka video youtube, nah salah satu fitur yang catatandroid suka dari youtube adalah video yang tetap melayang di atas layar hp meskipun kita scroll ke bawah, sehingga kita bisa tetap menonton video sambil melihat konten lainnya dan membaca komen.

Cara Membuat Video Sticky Layar Saat Scroll di Blog

Lalu apakah bisa kita membuat video di blog kita menjadi melayang / float seperti youtube? ternyata bisa dan caranya relatif mudah loh, cukup dengan memasukan beberapa script javascript di template kita, lalu membungkus video iframe/video embed dengan kode html. Penasaran kan?

Cara membuat video melayang ketika scroll

Jika sobat masih penasaran seperti apa sih maksudnya video melayang saat scroll ke bawah seperti youtube? berikut ini demonya:

DEMO

Bagaimana sobat cukup menarik bukan? jika kita membuka link Demo diatas melalui ponsel smartphone Android maka video akan float di atas, dan jika membukanya melalui PC maka video akan float di kanan atas layar.

Oke, yuk monggo di coba berikut ini tutorial Sticky Floating Video on Scroll original tutorial by wpdevdesign

Tutorial penerapan widget efek sticky float Video

Pertama-tama masukan kode javascript ini di atas /body

(function($) {
 var $window = $(window);
 var $videoWrap = $('.video-wrap');
 var $video = $('.video');
 var videoHeight = $video.outerHeight();

 $window.on('scroll',  function() {
  var windowScrollTop = $window.scrollTop();
  var videoBottom = videoHeight + $videoWrap.offset().top;
  
  if (windowScrollTop > videoBottom) {
   $videoWrap.height(videoHeight);
   $video.addClass('stuck');
  } else {
   $videoWrap.height('auto');
   $video.removeClass('stuck');
  }
 });
}(jQuery));

Selanjutnya copas kode css ini di bawah <styles .........

/* catatandroid.com float on scroll */
@keyframes fade-in-up {
  0% {
   opacity: 0;
 }
  100% {
   transform: translateY(0);
   opacity: 1;
 }
}

.video iframe {
  max-width: 100%;
  max-height: 100%;
}

.video.stuck {
  position: fixed;
  top: 57px;
  right: 20px;
  width: 360px;
  height: 240px;
  transform: translateY(100%);
  animation: fadeInDown 0.50s ease forwards;
 z-index: 9999999;
}

Selanjutnya kita atur agar di perangkat mobile smartphone juga float. cari kode ini di template sobat:
```
@media screen and (max-width:640px) {
```

Jika tidak ada copas kode di atas, lalu tambahkan kode ini di bawahnya:

.video.stuck {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 240px;
  transform: translateY(100%);
  animation: fadeInDown 0.50s ease forwards;
 z-index: 99;
}

SAVE template sobat

Selesai di bagian template, kali ini kita akan beralih ke konten postingan.

Setiap kali sobat ingin memasukan kode iframe atau kode embed video di dalam postingan sobat, bungkus kodenya sesuai dengan kode di bawah ini:

<div class="video-wrap">
<div class="video">
<iframe .....=""></iframe>
  </div>
</div>

Ganti baris kode iframe .... dengan kode iframe video milik sobat.

Selesai deh! cukup mudah bukan, sekarang silahkan coba lihat hasilnya di blog sobat.

Penutup

CatatanDroid hanya menambahkan kode css untuk perangkat mobile, karena pada tutorial aslinya tidak ada peruntukan css untuk perangkat mobile.

Sebagian value size dan padding juga disesuaikan agar lebih enak dilihat.

Jika sobat ingin langsung menuju tutorial aslinya silahkan buka https://wpdevdesign.com/sticky-floating-video-on-scroll, Terima kasih dan selamat mencoba!