Hello sobat icloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya memasang dan menggunakan lazy youtube di dalam website atau blogger
Info: Oke sobat jika sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Lazy Youtube
Apakah sebenarnya lazy youtube dan untuk apa kegunaan nya? Lazy youtube merupakan tampilan dari embed video youtube yang di buat secara custom, dengan tujuan mempercepat proses loading tampilan dari video YouTube nya
Fungsi lazy YouTube
Jika anda ingin menampilkan video YouTube di website ataupun di blogger maka mode embed adalah cara dan pilihan terbaik, namun agar tampilan video semakin menarik harus menggunakan script lazy YouTube, disertai tombol frame dan tombol play yang juga keren saat video YouTube di tampilkan
Menggunakan Javascript
Biasanya yang bernuansa lazy pasti memiliki kaitan dengan kode javascript, sama halnya script lazy YouTube ini, namun untuk menampilkan embed video ylutube di blogger cukup menggunakan kode HTML saja
Contoh Tampilan
Baiklah agar kamu tidak penasaran, admin telah menyediakan sebuah contoh demo, silahkan gunakan tombol di bawah ini untuk memeriksanya
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak, pastilah keren 🥰
Cara pembuatan
Baiklah sekarang saatnya admin bakalan menjelaskan bagaimana sih caranya memasang dan menggunakan script lazy YouTube di blogger ataupun di website silahkan baca dan pelajari hingga selesai ok
Kode CSS
Langkah pertama seperti biasa kamu bisa menyalin dan meletakkan kode CSS di bawah ini tepat di atas kode ]]></b:akin>
/* Lazy Youtube */
figure .rahLzYt{margin-bottom:8px}
.rahLzYt{background-color:#2e2e31;position:relative;overflow:hidden;padding-top:56%;border-radius:4px;cursor:pointer}
.rahLzYt:before{content:'';display:block;width:100%;height:100%;position:absolute;top:0;background:linear-gradient(to top,#202746,transparent);background:-webkit-linear-gradient(90deg,#202746,transparent);z-index:1;opacity:.5;}
.rahLzYt img{width:100%;top:0;left:0;opacity:.95;cursor:pointer}
.rahLzYt img.lazyloaded{top:-16.84%;}
.rahLzYt img, .rahLzYt iframe, .rahLzYt .play-button, .rahLzYt .play-button:before, .rahLzYt .rahPlyBt{position:absolute}
.rahLzYt .play-button{width:75px;height:50px;z-index:1;border-radius:15px;border:2px solid rgba(255,255,255,.75);cursor:pointer}
.rahLzYt .play-button, .rahLzYt .play-button:before, .rahLzYt .rahPlyBt{top:50%;left:50%;transform:translate3d(-50%,-50%,0);-webkit-transition:all .5s ease;transition:all .5s ease}
.rahLzYt .play-button:hover{border-color:#cc181e}
.rahLzYt .play-button:hover:before{border-color:transparent transparent transparent #cc181e}
.rahLzYt .play-button:before{content:'';border-style:solid;border-width:10px 0 10px 15px;border-color:transparent transparent transparent rgba(255,255,255,.75);border-radius:3px;margin-left:1px}
.rahLzYt iframe{height:100%;width:100%;top:0;left:0;z-index: 2;}
.rahLzYt .rahPlyBt{display:inline-block;width:70px;height:70px;z-index:1}
.rahLzYt .rahPlyBt svg{width:inherit;height:inherit;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:7}
.rahLzYt .rahPlyBt .circle{stroke:rgba(255,255,255,.75);stroke-dasharray:650;stroke-dashoffset:650;-webkit-transition:all .5s ease-in-out;transition:all .5s ease-in-out;opacity:.3}
.rahLzYt .rahPlyBt .rahAgl{stroke:rgba(255,255,255,.75);stroke-dasharray:240;stroke-dashoffset:480;-webkit-transition:all .7s ease-in-out;transition:all .7s ease-in-out;transform:translateY(0);-webkit-transform:translateY(0)}
.rahLzYt .rahPlyBt:hover .rahAgl{animation:nudge .7s ease-in-out;-webkit-animation:nudge .7s ease-in-out}
.rahLzYt .rahPlyBt:hover .rahAgl, .rahLzYt .rahPlyBt:hover .circle{stroke-dashoffset:0;opacity:1;stroke:#cc181e}Info: Atau kamu bisa menggunakan tag <style> untuk meletakkan kode CSS di atas
Kode Javascript
Langkah selanjutnya kamu bisa menyalin kode javascript di bawah ini kemudian kamu bisa meletakkan nya di atas koode </body>
<script>/*<![CDATA[*/
var _0xa503=["\x2E\x72\x61\x68\x4C\x7A\x59\x74","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72\x41\x6C\x6C","\x6C\x65\x6E\x67\x74\x68","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x6D\x67\x2E\x79\x6F\x75\x74\x75\x62\x65\x2E\x63\x6F\x6D\x2F\x76\x69\x2F","\x65\x6D\x62\x65\x64","\x64\x61\x74\x61\x73\x65\x74","\x2F\x73\x64\x64\x65\x66\x61\x75\x6C\x74\x2E\x6A\x70\x67","\x63\x6C\x61\x73\x73","\x6C\x61\x7A\x79\x6C\x6F\x61\x64","\x73\x65\x74\x41\x74\x74\x72\x69\x62\x75\x74\x65","\x77\x69\x64\x74\x68","\x31\x32\x38\x30","\x68\x65\x69\x67\x68\x74","\x37\x32\x30","\x64\x61\x74\x61\x2D\x73\x72\x63","\x73\x72\x63","\x64\x61\x74\x61\x3A\x69\x6D\x61\x67\x65\x2F\x70\x6E\x67\x3B\x62\x61\x73\x65\x36\x34\x2C\x69\x56\x42\x4F\x52\x77\x30\x4B\x47\x67\x6F\x41\x41\x41\x41\x4E\x53\x55\x68\x45\x55\x67\x41\x41\x41\x42\x41\x41\x41\x41\x41\x4A\x43\x41\x59\x41\x41\x41\x41\x37\x4B\x71\x77\x79\x41\x41\x41\x41\x41\x58\x4E\x53\x52\x30\x49\x41\x72\x73\x34\x63\x36\x51\x41\x41\x41\x41\x52\x7A\x51\x6B\x6C\x55\x43\x41\x67\x49\x43\x48\x77\x49\x5A\x49\x67\x41\x41\x41\x41\x50\x53\x55\x52\x42\x56\x43\x69\x52\x59\x32\x41\x59\x42\x61\x4F\x41\x43\x67\x41\x41\x41\x6B\x6B\x41\x41\x65\x41\x38\x36\x2F\x51\x41\x41\x41\x41\x41\x53\x55\x56\x4F\x52\x4B\x35\x43\x59\x49\x49\x3D","\x61\x6C\x74","\x59\x6F\x75\x74\x75\x62\x65\x20\x76\x69\x64\x65\x6F","\x6C\x6F\x61\x64","\x61\x70\x70\x65\x6E\x64\x43\x68\x69\x6C\x64","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x63\x6C\x69\x63\x6B","\x69\x66\x72\x61\x6D\x65","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72","\x30","\x61\x6C\x6C\x6F\x77\x66\x75\x6C\x6C\x73\x63\x72\x65\x65\x6E","","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x77\x77\x77\x2E\x79\x6F\x75\x74\x75\x62\x65\x2E\x63\x6F\x6D\x2F\x65\x6D\x62\x65\x64\x2F","\x3F\x72\x65\x6C\x3D\x30\x26\x73\x68\x6F\x77\x69\x6E\x66\x6F\x3D\x30\x26\x61\x75\x74\x6F\x70\x6C\x61\x79\x3D\x31","\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C"];(function(){var _0xe9a6x1=document[_0xa503[1]](_0xa503[0]);for(var _0xe9a6x2=0;_0xe9a6x2< _0xe9a6x1[_0xa503[2]];_0xe9a6x2++){var _0xe9a6x3=_0xa503[3]+ _0xe9a6x1[_0xe9a6x2][_0xa503[5]][_0xa503[4]]+ _0xa503[6];var _0xe9a6x4= new Image();_0xe9a6x4[_0xa503[9]](_0xa503[7],_0xa503[8]);_0xe9a6x4[_0xa503[9]](_0xa503[10],_0xa503[11]);_0xe9a6x4[_0xa503[9]](_0xa503[12],_0xa503[13]);_0xe9a6x4[_0xa503[9]](_0xa503[14],_0xe9a6x3);_0xe9a6x4[_0xa503[9]](_0xa503[15],_0xa503[16]);_0xe9a6x4[_0xa503[9]](_0xa503[17],_0xa503[18]);_0xe9a6x4[_0xa503[21]](_0xa503[19],function(){_0xe9a6x1[_0xe9a6x2][_0xa503[20]](_0xe9a6x4)}(_0xe9a6x2));_0xe9a6x1[_0xe9a6x2][_0xa503[21]](_0xa503[22],function(){var _0xe9a6x5=document[_0xa503[24]](_0xa503[23]);_0xe9a6x5[_0xa503[9]](_0xa503[25],_0xa503[26]);_0xe9a6x5[_0xa503[9]](_0xa503[27],_0xa503[28]);_0xe9a6x5[_0xa503[9]](_0xa503[15],_0xa503[29]+ this[_0xa503[5]][_0xa503[4]]+ _0xa503[30]);this[_0xa503[31]]= _0xa503[28];this[_0xa503[20]](_0xe9a6x5)})}})()/*]]>*/
</script>Info: Jangan mebgubah kode script di atas karena sudah cocok dengan class CSS yang admin berikan di atas
Cara menampilkan
Nah setelah peoses penginstalan kode CSS dan javascript di atas, silahkan simpan kode HTML ini di notepad anda
<div class='rahLzYt' data-embed='id_youtube'>
<div class='rahPlyBt'>
<svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='rahAgl' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
</div>
</div>Info: Kamu bisa mengubah ID dari video youtube nya saja, untuk menampilkan, setiap video YouTube memiliki id yang berbeda beda