Ditulis oleh: Ditulis pada: 10/20/2015
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.
- Manipulasi Tampilan Video Youtube Di Postingan Blog
- Alternative Lain Manipulasi Tampilan Video Youtube
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 {"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>
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 {"static_page","item"}'>
<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.