Responsive Youtube Video With Lazy Loading Onclick
Salah satu penyumbang loading sebuah halaman blog ialah embed dari sebuah video menyerupai video Youtube.Salah satu cara untuk mengatasinya yaitu dengan memanipulasi video Youtube dengan sebuah gambar yang sering disebut trik lazy load Youtube video atau menyerupai yang sudah aku share di link di bawah ini.
- Manipulasi Tampilan Video Youtube Di Postingan Blog
- Alternative Lain Manipulasi Tampilan Video Youtube
Atau dapat dicoba cara lainnya tentang ini dari postingan di blog +Kang Ismet
Nah kali ini aku akan mencoba menciptakan manipulasi video Youtube ini dengan lazy load onclick event. Cara kerjanya yaitu kita menunjukkan 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 kemudian di link di bawah ini.
Silahkan copy CSS di bawah ini dan paste di atas isyarat
</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 memakai 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 isyarat di bawah ini di atas isyarat
</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 isyarat di bawah ini pada editor postingan dalam mode HTML.
<div class="youtube" onclick="videoPlay(this)">
<div class="youtube-resposive">
<img alt="Responsive Youtube Video With Lazy Loading OnClick Responsive Youtube Video With Lazy Loading OnClick" 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 isyarat qwN01jlSD8c dengan ID video yang ingin ditampilkan.
Hasilnya akan menyerupai video di halaman demo ini.
Sumber https://www.kompiajaib.com/
0 Response to "Responsive Youtube Video With Lazy Loading Onclick"
Posting Komentar