Membuat Video Melayang Saat Halaman Digulir

Bagaimana sih cara Membuat Video Melayang Saat Halaman Digulir? Mungkin sobat pernah melihat video di situs Youtube, Vidio atau situs lain yang ketika video sedang dimainkan dan sobat menggulirkan halaman ke bawah maka video tersebut otomatis akan mengikuti kemana sobat menggulirkan halaman. Cara kerja dari tips yang akan saya bagikan ini pun hampir sama, namun bedanya video akan tetap melayang mengikuti halaman yang kita gulir meskipun video belum dimainkan.

Beberapa waktu lalu saya pernah berbagi tips tentang Cara Memasang Video Youtube Responsive di Blog, dengan cara tersebut video Youtube yang ditambahkan di dalam postingan akan otomatis mengikuti dimensi layar dari perangkat yang sobat gunakan. Nah, pada tips kali ini Arlina Design akan menggabungkan tips video responsive dengan tips video melayang saat digulir. Bagi yang tertarik, bisa ikuti langkah-langkah di bawah ini.

Membuat Video Melayang Saat Halaman Digulir

Buka dasbor Blogger > Klik menu Tema dan Edit HTML > Tambahkan kode CSS ini sebelum </head>

<style type='text/css'>
@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:absolute;left:0;right:0;top:0;bottom:0;float:left;overflow:hidden;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}.floatvideo-wrapper{text-align:center}.floatvideo iframe{max-width:100%;max-height:100%}.floatvideo.fly{padding:0;position:fixed;bottom:20px;right:20px;box-shadow:0 8px 10px -5px rgba(0,0,0,0.15);-webkit-transform:translateY(100%);transform:translateY(100%);width:260px;height:145px;-webkit-animation:fade-in-up .25s ease forwards;animation:fade-in-up .25s ease forwards;z-index:99}.videoyoutube{text-align:center;margin:auto;width:100%}.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
@media screen and (max-width:640px){.floatvideo.fly{bottom:10px;right:10px;width:160px;height:85px}.video-responsive{padding-bottom:54%}}
</style>

Edit pada kode yang ditandai untuk menentukan posisi video.

Selanjutnya tambahkan kode di bawah ini sebelum </body>

<script type='text/javascript'>
//<![CDATA[
// Video Melayang
var $window=$(window),$floatvideoWrap=$(".floatvideo-wrapper"),$floatvideo=$(".floatvideo"),floatvideoHeight=$floatvideo.outerHeight();$window.on("scroll",function(){$window.scrollTop()>floatvideoHeight+$floatvideoWrap.offset().top?($floatvideoWrap.height(floatvideoHeight),$floatvideo.addClass("fly")):($floatvideoWrap.height("auto"),$floatvideo.removeClass("fly"))}),setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
//]]>
</script>

Bagi yang sudah menambahkan kode dari tips Cara Memasang Video Youtube Responsive di Blog, cukup ganti dengan kode di atas.

Kemudian klik Simpan tema.

Dan untuk kode pemanggilnya, tambahkan kode ini di dalam editor postingan pada tab HTML (bukan Compose)

<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <div class='videoyoutube'>
         <div class='video-responsive'>
            <div class='video-youtube loader' data-src='//www.youtube.com/embed/tO01J-M3g0U'></div>
         </div>
      </div>
   </div>
</div>

Edit kode yang ditandai dengan kode video Youtube lain

Untuk hasilnya bisa sobat klik tombol di bawah ini

Result

Bagaimana kalau sobat ingin menambahkan video selain video dari Youtube? Jawabannya, Tergantung. Tergantung dari situs mana link video tersebut berasal, karena setelah saya menambahkan link video dari Dailymotion dan vidio.com video jadi tidak muncul, sedangkan untuk link video dari Google Drive bisa muncul. Contohnya seperti ini :

<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <div class='videoyoutube'>
         <div class='video-responsive'>
            <div class='video-youtube loader' data-src='//drive.google.com/file/d/0B0Ay6s7CmaBAaHNXbFAtLVZ3ZFU/preview'></div>
         </div>
      </div>
   </div>
</div>

Result

Untuk menambahkan video dari iFrame selain Youtube formatnya seperti ini :

<div class='floatvideo-wrapper'>
   <div class='floatvideo'>
      <iframe width='600' height='340' src='LINK-VIDEO-DI-SINI' frameborder='0' gesture='media' allowfullscreen></iframe>
   </div>
</div>

Edit bagian yang ditandai.

Oke, sekian dari saya tentang cara Membuat Video Melayang Saat Halaman Digulir. Mudah-mudahan dengan tips ini dapat membuat situs sobat menjadi tambah menarik dan memunculkan ide baru untuk membuat kode lain melayang saat digulir, misalnya seperti tombol berbagi di bagian postingan. Terima kasih sudah berkunjung dan wassalam.

Invert

Wednesday, February 6, 2019