Manipulasi loading Video Youtube Responsive With Lazy Loading OnClick

Postingan ini yakni 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 biar tidak membuat berat loading pada postingan dikala pungunjung datang ke blog yang kita kelola.

Seperti yang kita ketahui bersama salah satu penyumbang loading terberat yakni video youtube yang kita pasang di blog, nah itu iyu disini aku 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 isyarat script akan kita modifikasi yaitu dengan memperlihatkan 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 isyarat parameter AutoPlay dan secara otomatis video akan memutar, resah ya ya teman ? eksklusif saja buat teman yang mau mencobanya mari kita simak bersama.

Langkah Pertama

Silahkan teman salin isyarat CSS dibawah ini lalu letakkan sempurna di atas isyarat </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 teman salin kembali isyarat 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 teman pakai isyarat 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 isyarat yang ditandai vyT-oGDnMqE silahkan teman ganti dengan ID video yang mau teman pasang.

Seperti Contoh nanti risikonya akan menyerupai ini.

Demo

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