Video Melayang saat halaman Blog di Gulir

Video Melayang saat halaman di Gulir  

 

Berikut ini kita akan kupas tuntas bagi pemula yang ingin mengetahui, bagaimana caranya (tip ‘n trik) menempatkan video youtube pada halaman postingan Blog. Ketika halaman digulirkan, ketika video yang berada dihalaman menghilang digantikan dengan video kecil yang muncul melayang (floating) disudut kiri bawah monitor atau HP seperti pada video berikut.

Membuat video melayang saat Halaman Digulirkan

• Setelah berada pada dasbor Blogger > Klik Tema > edit HTML .

• Klik tanda segitiga > pilih Edit HTML.

• Pada text editor Html > Ctrl F >
• ketik </head>,  lalu Enter

• Baca Juga : How to make sticky, floating videos
• Tempelkan atau paste kode CSS berikut, diatas </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>

• Tempelkan atau paste kode CSS berikut, diatas </head>

Baca juga: Memasang Video Youtube Responsive di Blog

Dengan cara yang sama cari Kode ini berikut </body>.

<script type='text/javascript'>

//<![CDATA[

// terima kasih yang telah membantu

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>

Klik tombol Simpan yang berada dibagian kanan atas.

Selesai sudah mengatur posisi Video. Untuk sementara ikuti saja setingan yang diberikan.  

Karena vidoe Youtube akan ditempatkan pada halaman artikel, selanjutnya adalah kode pemanggilan yang akan ditempatkan pada teks editot yang berada pada halaman posting.

Klik tanda panah untuk menutup teks editor.

• Klik tombol Postingan Baru.

• Pada halaman postingan > klik ikon Pinsil > pilih Tampilan HTML.

• Tempatkan atau pastekan kode berikut.

Posisi disesuaikan dimana video akan ditempatkan dalam artikel yang ingin Anda kerjakan.

 <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/fFKYagqNi34'></div>

         </div>

      </div>

   </div>

</div>

Kode diatas fFKYagqi34, ganti dengan kode yang Anda ambil dari dari youtube. 

Mengambil kode embed dari youtube.

• Buka dan cari dimana video Youtube yang akan diembed.
• Klik tombol Bagikan (Share).
• Copy kode lalu tempelkan/paste ke kode diatas ganti dengan seperti contoh diatas fFKYagqi34.

Kode ini juga tertera pada URL.

Jika Anda ingin menempatkan video youtube langsung, tanpa efek melayang. Ambil kode dibawah ini lalu tempatkan pada halaman postingan (compose).

• Klik tombol Sematkan > copy kode tersebut. 

Setelah kode diatas ditempakan pada halaman postingan (compose)

• Klik tombol Publikasikan.
• Klik tombol Lihat Blog.

Jika Halaman digulirkan, ketika video menghilang, muncul layar kecil video youtube sebagai gantinya.

Setelah kode diatas ditempakan pada halaman postingan (compose)

• Klik tombol Publikasikan.
• Klik tombol Lihat Blog.

Jika halaman digulirkan, ketika video menghilang, muncul layar kecil video youtube disudut kanan bawah sebagai gantinya.

Untuk menambah pengetahuan tentang pelajaran ini, dapat ikuti postingan berikut:

• How to Add Floating Video to Any Page 

• Cara Memasukkan Video Kedalam Postingan Blog.

• Cara Mudah Embed Video Youtube

• Menyisipkan Video ke dalam Postingan Blog

 Selamat mencoba, semoga sukses!!

 

Salam Kupas Tuntas.