Memasang Efek Melayang (Sticky) Video YouTube di Blog

Cara Membuat dan Memasang Efek Melayang (Sticky) Pada Video YouTube Saat Scroll Halaman Di Blog - Efek melayang atau sticky video youtube ini merupakan salah satu fitur tambahan bisa kamu pasang di blog kamu untuk mempermudah para pengunjung blog saat mereka memutar ataupun tidak video youtube yang ada di artikel blog kamu.

Ketika user atau pengunjung blog ini menggulir halaman ke atas dan ke bawah, maka video youtube ini akan mengikuti kemana pun arah user ini menggulir halaman secara responsive. Jadi video tersebut tetap akan mengikuti dimensi dan lebar blog sesuai dengan perangkat yang digunakan.

Biasanya fitur sticky ini digunakan pada header blog, widget sidebar atau related post. Namun sticky ini juga tidak terbatasi hanya pada header, widget sidebar dan related post saja. Bahkan pada video youtube yang ada di dalam artikel juga bisa dipasang efek melayang atau sticky ini.

Nah, di artikel kali ini kita akan bahas tutorial bagaimana cara membuat efek melayang sticky pada video youtube yang ada di dalam postingan blog kamu. Berikut tutorial cara membuat dan memasang efek melayang (sticky) pada video youtube yang ada di dalam artikel. Untuk demonya, kamu bisa cek di halaman berikut.

Result   

Sticky video youtube ini menggunakan beberapa baris JavaScript dan sedikit CSS. Jadi sebaiknya jika kamu ingin memasang efek melayang (sticky) video youtube ini di postingan blog, sebaiknya pasang langsung script-nya ke dalam postingan jangan melalui edit HTML.

Karena saya tahu, pasti kamu juga tidak akan menggunakan efek melayang (sticky) ini di setiap postingan kamu. Tapi kalau ingin menaruh kodenya ke dalam template juga tidak masalah.

Cara Membuat dan Memasang Efek Melayang (Sticky) Pada Video YouTube di Blog

1. Buka dashboard blogger kamu
2. Masuk ke menu Theme ➤ Edit HTML
3. Kemudian taruh CSS dibawah ini diatas atau sebelum kode ]]></b:skin> atau </style>

   /* CSS Sticky Video YouTube */
   @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%}}

4. Setelah itu tambahkan juga JavaScript dibawah ini sebelum tag penutup </body>

   <script>
   //<![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>

5. Setelah semuanya sudah ditambahkan ke dalam template blog kamu, klik simpan

Sampai ditahap ini script sticky video youtube sudah berhasil terpasang di template blog kamu. Selanjutnya tinggal kamu panggil semua elemen tadi ke dalam artikel kamu. Untuk caranya, kamu hanya perlu masukan kode dibawah ini dalam 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='https://www.youtube.com/embed/kode-embed-kamu'></div>
         </div>
      </div>
   </div>
</div>

Ganti tulisan yang di mark dengan kode embed video youtube kamu. Dan satu hal lagi, script ini juga akan me-resize ukuran video tersebut agar menyesuaikan dengan lebar blog pada masing-masing perangkat (responsive).

Nah, itulah tutorial cara memasang efek melayang (sticky) pada video youtube di blog yang bisa saya sampaikan di artikel kali ini. Semoga bisa bermanfaat dan membantu bagi yang membutuhkan. Jika ada kesalahan atau eror pada kode diatas, tulis di kolom komentar.

Cindy NOTHING!!!

Share :