Ditulis oleh: Ditulis pada: 10/20/2015
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 {"static_page","item"}'>
<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 {"static_page","item"}'>
<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("jlQVAlmXqoE");</script>Silahkan ganti kode jlQVAlmXqoE dengan ID video youtube yang ingin ditampilkan di dalam postingan sehingga akan tampak seperti embed video di halaman demo ini.