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;}
}</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>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/AVvXsEhDDhyphenhyphenrrhenaOh_0r_W2bhSX0NrJHuszaW4PM2z-b4tu6_NWcZGBofsNu5G5cyF7vD3bxgA3j_nWoTQdMaFomw6fqMoW52v1BHUaYPI-RQvBd4jqYtN-KK3pxGXYWRsVgMLFuQlljJQx9s/s1600-rw/52590739_2195779350751978_3300639387238268928_n.jpg" type="image/webp"/>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDDhyphenhyphenrrhenaOh_0r_W2bhSX0NrJHuszaW4PM2z-b4tu6_NWcZGBofsNu5G5cyF7vD3bxgA3j_nWoTQdMaFomw6fqMoW52v1BHUaYPI-RQvBd4jqYtN-KK3pxGXYWRsVgMLFuQlljJQx9s/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/AVvXsEhDDhyphenhyphenrrhenaOh_0r_W2bhSX0NrJHuszaW4PM2z-b4tu6_NWcZGBofsNu5G5cyF7vD3bxgA3j_nWoTQdMaFomw6fqMoW52v1BHUaYPI-RQvBd4jqYtN-KK3pxGXYWRsVgMLFuQlljJQx9s/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>-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?