Membuat Video Melayang Ketika Halaman Digulir

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

Beberapa waktu kemudian aku pernah membuatkan tips ihwal 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 teman gunakan. Nah, pada tips kali ini akan menggabungkan tips video responsive dengan tips video melayang ketika digulir. Bagi yang tertarik, sanggup ikuti langkah-langkah di bawah ini.

Membuat Video Melayang Saat Halaman Digulir

Buka dasbor Blogger > Klik sajian Tema dan Edit HTML > Tambahkan isyarat 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 isyarat yang ditandai untuk memilih posisi video.

Selanjutnya tambahkan isyarat 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 isyarat dari tips Cara Memasang Video Youtube Responsive di Blog, cukup ganti dengan isyarat di atas.

Kemudian klik Simpan tema.

Dan untuk isyarat pemanggilnya, tambahkan isyarat 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 isyarat yang ditandai dengan isyarat video Youtube lain

Untuk alhasil sanggup teman klik tombol di bawah ini

• Result

Bagaimana jikalau teman ingin menambahkan video selain video dari Youtube? Jawabannya, Tergantung. Tergantung dari situs mana link video tersebut berasal, alasannya ialah sesudah aku menambahkan link video dari Dailymotion dan vidio.com video jadi tidak muncul, sedangkan untuk link video dari Google Drive sanggup muncul. Contohnya menyerupai 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 menyerupai 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 bab yang ditandai.

Oke, sekian dari aku ihwal cara Membuat Video Melayang Saat Halaman Digulir. Mudah-mudahan dengan tips ini sanggup menciptakan situs teman menjadi tambah menarik dan memunculkan wangsit gres untuk menciptakan isyarat lain melayang ketika digulir, contohnya menyerupai tombol membuatkan di bab postingan. Terima kasih sudah berkunjung dan wassalam.

Share this post