Manipulasi loading Video Youtube Responsive With Lazy Loading OnClick

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.

Demo

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