Membuat Video Youtube Melayang Saat Halaman Discroll

Diposting pada
Membuat Video Youtube Melayang Saat Halaman Discroll
Source image by arlinadzgn

Membuat Video Youtube Melayang Saat Halaman Discroll – Mungkin Anda pernah melihat situs-situs yang dimana pada halaman artikel nya menampilkan sebuah video dan saat halaman itu kita scroll video tersebut otomatis akan mengikuti arah scroll yang kita tuju.

Dan cara kerja Video Youtube Melayang Saat Halaman Discroll ini sebenar nya hampir sama, mungkin beda nya video youtube ini akan melayang mengikuti arah scroll walaupun video tersebut belum di mainkan. Pada artikel sebelum nya saya juga sempat Membuat Video Di Blogger Menjadi Responsive . Dengan cara itu sehingga video youtube yang di tambahkan pada postingan akan otomatis mengikuti dimensi layar dari perangkat yang Anda gunakan.

Dan bagi Anda sobat blogger yang ingin mencoba untuk membuat video youtube melayang di blogger, Anda bisa ikuti cara nya sebagai berikut.

Membuat Video Youtube Melayang Saat Halaman Discroll

Silahkan Anda copy kode CSS dibawah ini, lalu letakan kode tersebut di atas kode </head> pada template blogger Anda.

 <style type='text/css'>
@keyframes fade-in-up{0%{opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
.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}
</style>

Pada kode bottom:20px;right:20px; silahkan Anda Edit untuk menentukan posisi Video nya. Lalu copy kode dibawah ini dan letakan kode tersebut di atas 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>

Setelah itu klik Simpan.

Untuk kode pemanggil nya silahkan Anda gunakan kode dibawah ini ke dalam postingan Anda yang ingin Anda masukan video youtube nya. Ingat 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='//www.youtube.com/embed/tO01J-M3g0U'></div>
         </div>
      </div>
   </div>
</div>

Pada kode tO01J-M3g0U silahkan Anda ganti dengan kode video youtube Anda.

DEMO

Tutorial di atas hanya untuk video youtube saja, dan bila anda ingin memasukan video lain selain youtube seperti Video dari Google Drive, Anda bisa gunakan kode dibawah ini. Cara nya sama, Anda cukup masuka kode tersebut ke dalam postingan Anda.

 <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>

Dan silahkan Anda ganti kode drive.google.com/file/d/0B0Ay6s7CmaBAaHNXbFAtLVZ3ZFU/preview dengan kode Video Google Drive Anda.

DEMO

Dan yang terakhir bila anda ingin menambahkan Video dari iFrame selain youtube format nya seperti kode dibawah 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>

Itulah Cara Membuat Video Youtube Melayang Saat Halaman Discroll yang bisa Anda coba di blog kalian. Bila ada yang ingin di tanyakan menyangkut isi dari artikel ini, silahkan tinggalkan komentar Anda dibawah. Dan jangan lupa untuk bagikan Artikel ini ke teman-teman di social media Anda. Selamat mencoba!

Code Script By Arlinadzgn

Tinggalkan Balasan

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