KODE IKLAN DFP 1 Manipulasi loading Video Youtube Responsive With Lazy Loading OnClick | Masgunggoyo

Recents Posts

    Iklan Atas Artikel

    Manipulasi loading Video Youtube Responsive With Lazy Loading OnClick

    KODE IKLAN 200x200
    KODE IKLAN 336x280
     Postingan ini adalah lanjutan dari postingan sebelumnya 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=" Postingan ini adalah lanjutan dari postingan sebelumnya Manipulasi loading Video Youtube Responsive With Lazy Loading OnClick" 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.

    Sumber https://www.dibalikseo.com
    KODE IKLAN 300x 250
    close
    ==[ Klik disini 1X ] [ Close ]==
    KODE IKLAN DFP 2
    KODE IKLAN DFP 2