Lazy Loading For Responsive Youtube Video With Javascript

Lazy Loading For Responsive Youtube Video With Javascript

Bola Hero Gawai

Lazy Loading For Responsive Youtube Video With Javascript

Lazy Loading For Responsive Youtube Video With Javascript
Hari ini masih mengenai lazy loading untuk video youtube. Sebelumnya saya pernah membahas tentang cara menampilkan responsive video Youtube dengan javascript agar menampilkan video Youtube di postingan menjadi lebih simple.

Baca juga: Embed Video Youtube Responsive Dengan Javascript

Dan sebelum postingan ini, saya juga membagikan trik cara membuat responsive youtube video dengan lazy loading onclick. Kemudian ada sahabat Kompi Ajaib ada yang menanyakan untuk merubah secara otomatis (tanpa mengedit postingan) responsive youtube video dengan javascript yang sudah digunakannya menjadi menggunakan lazy loading onclick.

Baca juga: Responsive Youtube Video With Lazy Loading OnClick

Setelah saya utak-atik ternyata bisa juga untuk memberikan lazy loading onclick pada responsive youtube video dengan javascript tanpa harus mengedit ulang postingannya. Hanya tinggal mengganti javascript di edit HTML dan menambahkan CSS saja.

Untuk menggantinya silahkan ikuti langkahnya di bawah ini.

Silahkan cari kode javascript yang sebelumnya sudah di pasang seperti kode di bawah ini di atas kode </head>:


<script type="text/javascript">
//<![CDATA[
function embed(video) {
   document.write('<div style="text-align:center;background:linear-gradient(to bottom,#fefefe 0,#d1d1d1 100%);border:1px solid #A8A8A8;border-radius:5px;margin:20px auto;width:80%;box-shadow:1px 30px 30px -26px #818181;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:8px;"><iframe style="position:absolute;top:0;left:0;width:100%;height:100%;" src="http://www.youtube.com/embed/');
   document.write(video);
   document.write('" frameborder="0" allowfullscreen="1"></iframe></div></div>');
}
//]]>
</script>

Kemudian silahkan ganti dengan javascript di bawah ini:


<script>
//<![CDATA[
function embed(video) {
   document.write('<div class="youtube" onclick="videoPlay(this)"><div class="youtube-resposive"><img alt="youtube image" src="http://i.ytimg.com/vi/');
   document.write(video);
   document.write('/sddefault.jpg" width="500" height="281"/>');
   document.write('<!--<iframe src="http://www.youtube.com/embed/');
   document.write(video);
   document.write('?autoplay=1&autohide=1" frameborder="0" allowfullscreen="1"></iframe>--></div></div>');
}
//]]>
</script>

Kemudian simpan kode CSS di bawah ini di atas kode </head> seperti postingan sebelumnya.


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

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 jangan lupa pastikan bahwa Anda sudah memasang font-awesome di blog Anda.

Maka secara otomatis video yang sudah dipasang dengan javascript sebelumnya akan otomatis berubah menjadi menggunakan lazy loading onclick.

Dan untuk menampatkan video youtube di postingan selanjutnya, caranya masih sama seperti sebelumnya yaitu cukup menggunakan kode seperti di bawah ini di dalam editor postingan dalam mode HTML.


<script>embed("G7bdRrFAMcQ");</script>


Silahkan ganti kode G7bdRrFAMcQ dengan ID video youtube yang ingin ditampilkan di dalam postingan sehingga akan tampak seperti embed video di bawah ini.


Share this:

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

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

1 Comment

saya coba kok gambarnya ga muncul

Balas
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!

×
×
×