Cara Membuat Video Melayang Saat Halaman Digulir (Panduan Blogger)

Membuat Video Melayang Saat Halaman Digulir

Selamat sore teman-teman blogger. Bagi sobat yang baru pertama mengunjungi blog lapaklama.com saya ucapkan selamat datang. Pernahkan kamu mengunjungi situs youtube.com? Pasti pernah kan! disitus tersebut disaat kita sedang menonton video dan kita menggulirkan halaman kebawah maka video yang tadi kita tonton juga akan ikut kebawah (Melayang) nah di artikel ini saya akan membagikan tips cara membuat video melayang saat halaman digulir.

Video yang akan kita gunakan adalah video yang kita ambil dari youtube, Di artikel sebelumnya saya sudah membagikan panduan cara memasang video youtube di blog, Jika teman-teman belum membacanya saya sarankan untuk membaca panduan tersebut terlebih dahulu dihalaman berikut ini. dengan cara tersebut video youtube akan tersematkan didalam blog dengan mengikuti dimensi layar yang digunakan oleh pengunjung (responsive).

Panduan ini sangat bagus apabila kita terapkan di template blog yang memang didesain untuk menampilkan video youtube. Contohnya seperti template KompiTube ini.

Bagi yang tertarik untuk melakukan tips ini. Silahkan ikuti panduan cara membuat video melayang saat halaman digulir dibawah ini.

Panduan membuat video melayang saat halaman digulir

Membuat Video Melayang Saat Halaman Digulir
Membuat Video Melayang Saat Halaman Digulir

Buka halaman dasboard blogger kamu di www.blogger.com

Kemudian pilih menu Tema/Template dan kemudian pilih sub menu Edit HTML.

Silahkan cari kode </head> (untuk mempermudah pencarian kode. Gunakan kombinasi tombol CTRL+F). dan tambahkan CSS dibawah ini sebelum kode </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>

Note: silahkan edit pada kode bottom:20px;right:20px; untuk menentukan posisi.

Kemudian tambahkan kode dibawah ini sebelum kode </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>

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

Terahir Simpan Template

Terahir untuk memanggil kode yang sudah kita pasang tadi. Tambahkan kode ini didalam editor postingan dan rubah menjadi mode 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>

Note: Edit code tO01J-M3g0U dengan kode youtube lainya.

Selesai. Untuk demonya silahkan lihat melalui tombol dibawah ini.

Live Demo

Sekian informasi kali ini. Jika kamu suka dengan artikel seperti ini. silahkan berlangganan artikel terbaru lapaklama via email secara gratis. dan jangan lupa untuk klik suka halaman fanspage lapaklama.com.

Nilai Kualitas Konten

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *