Skip to main content

Responsive Youtube Video With Lazy Loading OnClick

Salah satu penyumbang loading sebuah halaman blog adalah embed dari sebuah video seperti video Youtube.

Salah satu cara untuk mengatasinya yaitu dengan memanipulasi video Youtube dengan sebuah gambar yang sering disebut trik lazy load Youtube video atau seperti yang sudah saya share di link di bawah ini.


Atau bisa dicoba cara lainnya tentang ini dari postingan di blog +Kang Ismet

Nah kali ini saya akan mencoba membuat manipulasi video Youtube ini dengan lazy load onclick event. Cara kerjanya yaitu kita memberikan komentar pada iframe-nya sehingga iframe diabaikan browser, kemudian dengan onclick event kita akan me-reload iframe dengan menghilangkan komentar pada iframe tadi dan dengan menambahkan parameter autoplay maka video akan memutar secara otomatis.

Untuk memulainya, kita akan memodifikasi responsive Youtube video dari postingan yang lalu di link di bawah ini.


Silahkan copy CSS di bawah ini dan paste 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>

Tutorial ini menggunakan font awesome untuk menampilkan tombol play video Youtube, jadi silahkan pastikan bahwa Anda sudah menyimpan font awesome di blog. Jika belum, silahkan ikuti postingan di link di bawah ini:


Kemudian simpan juga kode di bawah ini di atas 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>

Dan untuk menampilkan responsive Youtube video with lazy load onclick event ini di postingan, silahkan gunakan kode di bawah ini pada editor postingan dalam mode HTML.


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

Ganti kode qwN01jlSD8c dengan ID video yang ingin ditampilkan.

Hasilnya akan seperti video di halaman demo ini.


Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:

PrivacySitemap
©2021 KOMPI AJAIB