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 .
- Setelah berada pada dasbor Blogger > Klik Tema > edit HTML .
- Pada text editor Html > Ctrl F .
- ketik </head>, lalu Enter.
- 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.
- Klik tanda panah untuk menutup teks editor.
- Klik tombol Postingan Baru.
- 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.
Salam Kupas Tuntas.
0 Komentar