May 1, 2017

Manipulasi loading Video Youtube Responsive With Lazy Loading OnClick

Lazy Loading

Postingan ini adalah lanjutan dari postingan sebelumnya Cara Modifikasi Tampilan Video Youtube Responsive dan SEO Friendly masih seputar pemasangan Video Youtube di Postingan kali ini kita memanipulasi loading video youtube agar tidak membuat berat loading pada postingan saat pungunjung datang ke blog yang kita kelola.

Seperti yang kita ketahui bersama salah satu penyumbang loading terberat adalah video youtube yang kita pasang di blog, nah itu iyu disini saya akan membahas cara mengatasinya yaitu dengan cara Manipulasi loading Video Youtube Responsive With Lazy Loading OnClick, jadi tampilannya akan kita ganti dengan gambar prinsip kerjanya sangat sederhana nanti di kode script akan kita modifikasi yaitu dengan memberikan komentar pada iframe youtube sehingga secara otomatis akan diabaikan oleh browser. 

Dengan metode OnClick event akan me-reload iframe tersebut dan diperintahkan untuk menghilangkan komentar di iframe tadi dengan sedikit menambahkan kode parameter AutoPlay dan secara otomatis video akan memutar, bingung ya ya sobat ? langsung saja buat sobat yang mau mencobanya mari kita simak bersama.

Langkah Pertama
Silahkan sobat salin kode CSS dibawah ini lalu letakkan tepat di atas kode </head>

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<style type='text/css'>
/*<![CDATA[*/
.youtube{
    text-align:center;
    margin:0 auto;
    width:100%;
}
.youtube-resposive{
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    margin:0;
}
.youtube img{
    width:100%;
    height:auto;
    margin-top:-9%;
    z-index:1;
}
.youtube iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:2;
}
.youtube-resposive:before{
    content:"\f16a";
    font-family:FontAwesome;
    font-size:400%;
    position:absolute;
    top:50%;
    left:50%;
    margin:-32px 0 0 -32px;
    cursor:pointer;
    opacity:.7;
    transition: all 0.2s ease-out;
}
.youtube-resposive:hover:before{
    color:red!important;
    opacity:1;
}
/*]]>*/
</style>
</b:if>

Langkah Ke Dua
Silahkan sobat salin kembali kode dibawah ini lalu letakkan diatas kode </body>

<b:if cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}'>
<script>
//<![CDATA[
function videoPlay(anchor){
   anchor.innerHTML = anchor.innerHTML.replace('<!--','').replace('-->','');
   anchor.onclick= null;
   return false;
};
//]]>
</script>
</b:if>

Langkah Ke Tiga
Untuk menampilkan video youtube tersebut secara Responsive dengan lazy load onclick event di dalam postingan blog silahkan sobat pakai kode dibawah ini di editor postingan blog, ingat harus pakai mode HTML.

<div class="youtube" onclick="videoPlay(this)">
<div class="youtube-resposive">
<img alt="youtube image" src="http://i.ytimg.com/vi/vyT-oGDnMqE/sddefault.jpg" width="500" height="281"/> 
    <!--<iframe src="http://www.youtube.com/embed/vyT-oGDnMqE?autoplay=1&autohide=1" frameborder="0" allowfullscreen="1"></iframe>-->
</div>
</div>
</div>

Perhatikan kode yang ditandai vyT-oGDnMqE silahkan sobat ganti dengan ID video yang mau sobat pasang.

Seperti Contoh nanti hasilnya akan seperti ini.



Cara ini menggunakan Font Awesome jadi pastikan sobat sudah memasangnya, lalu SAVE dan selesai, Selamat Mencoba.

Artikel Terkait

Halo Sobat, sedikit cerita mengenai diri saya, saya adalah hanya seorang penulis amatiran yang mencoba berbagi pengetahuan dari apa yang saya dapat sehari-hari. Pengalaman ini saya tuangkan di tulisan dengan tujuan baik agar pengetahuan dan pengalaman saya ini dapat bisa di pergunakan dan bermanfaat khususnya untuk diri saya pribadi dan umumnya untuk orang lain, sehingga saya beri nama Web saya ini dibalikseo.com yang filosofinya adalah dibalik pengetahuan yang saya dapat.