Ditulis oleh: Ditulis pada: 6/26/2019
Responsive Facebook Video Embed Dengan Play Onclick Event - Salah satu yang menarik dilakukan dalam membuat sebuah postingan adalah menyertakan video, salah satunya adalah video Facebook.
Namun tentu saja dalam menambahkan video ke dalam postingan harus tepat dan benar sehingga embed video tidak mengganggu loading blog. Apalagi di zaman kecepatan ini, semua diperhitungkan untuk loading blog.
Dan di postingan ini kita akan membuat video Facebook menjadi responsive dengan play video onclick dan menggunakan defer image untuk thumbnail video dan thumbnail video juga menggunakan webp.
Sehingga trik embed video Facebook ini benar-benar tidak mengganggu loading blog. Trik ini menggunakan trik yang sama seperti untuk video Youtube, hanya penyesuaian untuk tombol play videonya menggunakan svg.
Nah, jika Anda ingin mencobanya, silahkan ikuti caranya berikut ini.
1. Silahkan copy CSS berikut dan paste di style blog Anda.
.facebook,.facebook_box{margin:0 auto;width:100%}
.facebook-resposive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0}
.facebook img{width:100%;height:auto;display:block;z-index:1}
.facebook iframe{position:absolute;top:0;left:-2px;width:calc(100% + 4px);height:100%;z-index:3;}
.facebook-resposive:after{content:"";cursor:pointer;margin:auto;width:80px;height:80px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='24' height='24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23ffffff' d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-position:center;-webkit-background-size:111px 111px;background-size:111px 111px;position:absolute;top:0;bottom:0;left:0;right:0;cursor:pointer;transition:all .2s ease-out;z-index:2;display:inline-block!important;border-radius:100%;overflow:hidden}
.facebook-resposive:before{content:"";cursor:pointer;margin:auto;width:80px;height:80px;background-color:#000;opacity:.3;position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;border-radius:100%}
.facebook-resposive:hover:before{opacity:.7}
@media screen and (max-width:960px){.facebook-resposive:after,.facebook-resposive:before{width:66px;height:66px;}
.facebook-resposive:after{-webkit-background-size:92px 92px;background-size:92px 92px;}
}2. Silahkan simpan Javascript berikut di atas kode </body>
<script>
//<![CDATA[
function videoPlay(n){return n.innerHTML=n.innerHTML.replace("<!--","").replace("-->",""),n.onclick=null,!1}
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
//]]>
</script>Jika blog Anda sudah menggunakan lazyload image, silahkan hapus kode yang ditandai.
3. Kemudian silahkan gunakan kode HTML berikut untuk menampilkan video Facebook di dalam postingan.
<div class="facebook_box">
<div class="facebook" onclick="videoPlay(this)">
<div class="facebook-resposive">
<picture>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq8xl41m56QUYzmRQUQgCxdLC1cF2gyBUF-keMjxVSr8bgyMgk74UJxbnwMzhyphenhyphentgBw40hbyA0f5kSMp1YKgbDWIfLpPRPblPVbin7nHdKLIXDN8MHSUzWwwaE_S2Wk9_DALGVSg7NNQhw/s1600-rw/52590739_2195779350751978_3300639387238268928_n.jpg" type="image/webp"/>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq8xl41m56QUYzmRQUQgCxdLC1cF2gyBUF-keMjxVSr8bgyMgk74UJxbnwMzhyphenhyphentgBw40hbyA0f5kSMp1YKgbDWIfLpPRPblPVbin7nHdKLIXDN8MHSUzWwwaE_S2Wk9_DALGVSg7NNQhw/s1600/52590739_2195779350751978_3300639387238268928_n.jpg" type="image/jpg"/>
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq8xl41m56QUYzmRQUQgCxdLC1cF2gyBUF-keMjxVSr8bgyMgk74UJxbnwMzhyphenhyphentgBw40hbyA0f5kSMp1YKgbDWIfLpPRPblPVbin7nHdKLIXDN8MHSUzWwwaE_S2Wk9_DALGVSg7NNQhw/s1600/52590739_2195779350751978_3300639387238268928_n.jpg" alt="Video Thumbnail" width="1280" height="720"/>
</picture>
<!-- <iframe src="https://www.facebook.com/plugins/video.php?href=https://www.facebook.com/ayohviralkan/videos/296545157683703/&width=500&show_text=false&height=280&autoplay=1&mute=0" width="500" height="280" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media; autoplay" allowFullScreen="true" data-autoplay="true"></iframe> -->
</div>
</div>
</div>Silahkan ganti URL image/picture dengan URL thumbnail video. Perhatikan penggunaan kode -rw untuk webp blogger. Untuk mendapatkan thumbnail video Facebook, saya jelaskan dalam video di bawah.
Silahkan ganti kode yang ditandai pada kode iframe dengan URL Video Facebook Anda.
Namun perlu diingat, untuk autoplay tidak akan berfungsi di perangkat mobile.
Selesai, mudah bukan?