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 mengembangkan 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 instruksi 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 instruksi yang ditandai untuk memilih posisi video.

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

Kemudian klik Simpan tema.

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

Untuk akhirnya sanggup teman klik tombol di bawah ini

• Result

Bagaimana bila teman ingin menambahkan video selain video dari Youtube? Jawabannya, Tergantung. Tergantung dari situs mana link video tersebut berasal, sebab sesudah aku menambahkan link video dari Dailymotion dan vidio.com video jadi tidak muncul, sedangkan untuk link video dari Google Drive sanggup muncul. Contohnya ibarat 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 ibarat 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 pecahan 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 ilham gres untuk menciptakan instruksi lain melayang ketika digulir, contohnya ibarat tombol mengembangkan di pecahan postingan. Terima kasih sudah berkunjung dan wassalam.

Tweet

Subscribe to receive free email updates: