Jika videonya menarik untuk dilihat, atau ada suara yang bisa didengarkan selagi membaca tulisan blog, misalnya suara musik atau narasi dengan topik terkait artikelnya, maka floating atau sticky YouTube video ini bisa membantu kenyamanan pengunjung laman blog.
Perlu saya sebutkan bahwa ada lumayan banyak cara untuk membuat floating video ini, namun ketika mencoba membuatnya ternyata sebagian besarnya gagal berfungsi sebagaimana yang diharapkan. Kesalahan mungkin ada di pihak saya, oleh sebab ketika orang mempublikasikan sebuah tulisan semacam ini mestinya ia telah mencobanya sendiri, dan berhasil.
Mungkin salah satu kesalahan itu adalah karena JavScript-nya membutuhkan penggunaan jQuery yang tak ada di blog saya, dan baru setelah menambahkan script jQuery maka script floating YouTube video-nya pun berfungsi baik. Begitu pun ada banyak uji coba salah yang saya lakukan agar video-nya muncul benar-benar di tempat yang pas, dengan ukuran yang pas pula.
Setelah menyebut semua itu, maka marilah kita melihat cara membuat floating YouTube Video saat scroll di Blogger.
Kode HTML
Berikut adalah kode html yang bisa dipasang di tempat yang Anda kehendaki. Jika di dalam tulisan, saya sarankan videonya diletakkan tepat setelah paragraf kedua atau ketiga. Bisa pula di puncak tulisan jika tidak bertabrakan dengan header blog.<div class="video-wrap">
<div class="video">
<div class="videoWrapper"><iframe width="100%" height="315" src="https://www.youtube.com/embed/h1llNpgg6ho?autoplay=1&mute=1" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" title="xyz" allowfullscreen></iframe></div> </div></div>Silahkan ganti kode video YouTube-nya yang berwarna merah dan title videonya. Untuk css videoWrapper agar videonya responsif full width, silahkan lihat tulisan Membuat Embed Iframe Video Youtube Responsive 100% Width, sedangkan untuk membuat video lazyload silahkan buka Lazy Load Embedded Youtube Video dengan Lazysizes.
Selanjutnya letakkan kode css di bawah ini di bagian tengah atau atas style, sebelum kode css untuk media. Kode ini membuat penempatan dan ukuran video berbeda untuk desktop dan perangkat mobile. Jika perlu, sesuaikan besaran ukuran peletakan videonya.
<b:if cond='data:blog.isMobileRequest'>
@keyframes fade-in-up {
0% {
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.video iframe {
max-width: 100%;
max-height: 100%;
}
.video.stuck {
position: fixed;
bottom: 30px;
right: 0;
width: 180px;
height: 120px;
transform: translateY(0%);
animation: fadeInDown 0.50s ease forwards;
z-index: 99;
}
<b:else/>
@keyframes fade-in-up {
0% {
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.video iframe {
max-width: 100%;
max-height: 100%;
}
.video.stuck {
position: fixed;
top: 135px;
right: 0px;
width: 225px;
height: 150px;
transform: translateY(0%);
animation: fadeInDown 0.50s ease forwards;
z-index: 99;
}
</b:if>
Selanjutnya salin kode JavaScript berikut ini dan kemudian letakkan sebelum </body> atau di tempat Anda suka.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js'/>
<script>
//<![CDATA[
(function($) {
var $window = $(window);
var $videoWrap = $('.video-wrap');
var $video = $('.video');
var videoHeight = $video.outerHeight();
$window.on('scroll', function() {
var windowScrollTop = $window.scrollTop();
var videoBottom = videoHeight + $videoWrap.offset().top;
if (windowScrollTop > videoBottom) {
$videoWrap.height(videoHeight);
$video.addClass('stuck');
} else {
$videoWrap.height('auto');
$video.removeClass('stuck');
}
});
}(jQuery));
//]]>
</script>
Jika sudah memakai script jQuery maka Anda cukup perbarui dengan versi terakhir, yang pada saat tulisan ini dibuat ada di versi 3.6.0. Silahkan mencoba, semoga berhasil dan bermanfaat. Sumber referensi tulisan Floating YouTube Video ini ada di sini. Akhir tulis, permisi..., pamit nggih, sampai bertemu di catatan yang lain.
Label: CSS, JavaScript, Youtube
Bagikan ke: WhatsApp, Email. Print!.
