Responsive Youtube Video With Lazy Loading OnClick

Responsive Youtube Video With Lazy Loading OnClick

Bola Hero Gawai

Responsive Youtube Video With Lazy Loading OnClick

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>
</div>

Ganti kode qwN01jlSD8c dengan ID video yang ingin ditampilkan.

Hasilnya akan seperti video di bawah ini.

youtube image

Referensi: http://bloggingexperiment.com/lazy-loading-video-facebook

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×