Add Script for Responsive Facebook Video Embed With Play Onclick Event

Responsive Facebook Video Embed With Play Onclick Event - One of the interesting things to do in making a post is to include videos, one of which is a Facebook video.

But of course in adding videos to the post must be precise and correct so that the embed video does not interfere with loading the blog. Especially in this age of speed, everything is calculated for blog loading.

And in this post we will make Facebook videos responsive by playing onclick videos and using defer images for video thumbnails and video thumbnails also using webp.

So that the Facebook video embed trick really doesn't interfere with loading the blog. This trick uses the same trick as for the Youtube video , only the adjustment for the video play button uses svg.

Well, if you want to try it, please follow the following way.

1. Please copy the following CSS and paste it in your blog style.

.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. Please save the following Javascript above the code </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>

If your blog already uses lazyload images, please delete the marked code.

3. Then please use the following HTML code to display the Facebook video in the post.

<div class="facebook_box">
<div class="facebook" onclick="videoPlay(this)">
<div class="facebook-resposive">
<picture>
  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTG8KQi0Y1agv1V50Ayp2WS6hooMsFgUtPjgzT58zMWt3l6KG1TEsA9QtvrKUdzTN3hk6S-tfrmZuQ8euFUHOXztH_DXhyufkDhsLQKrpvTZCJUhMoJk3P0GFuxzml2aKrEgBzoe84dQ/s1600-rw/52590739_2195779350751978_3300639387238268928_n.jpg" type="image/webp"/>
  <source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTG8KQi0Y1agv1V50Ayp2WS6hooMsFgUtPjgzT58zMWt3l6KG1TEsA9QtvrKUdzTN3hk6S-tfrmZuQ8euFUHOXztH_DXhyufkDhsLQKrpvTZCJUhMoJk3P0GFuxzml2aKrEgBzoe84dQ/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/AVvXsEiyTG8KQi0Y1agv1V50Ayp2WS6hooMsFgUtPjgzT58zMWt3l6KG1TEsA9QtvrKUdzTN3hk6S-tfrmZuQ8euFUHOXztH_DXhyufkDhsLQKrpvTZCJUhMoJk3P0GFuxzml2aKrEgBzoe84dQ/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/nameyourvideo/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>

Please replace the image / picture URL with the video thumbnail URL. Note the use of -rw code for blogger webp. To get a Facebook video thumbnail, I explain in the video below.

Please replace the code marked in the iframe code with your Facebook Video URL.

But keep in mind, for autoplay will not work on mobile devices.

Done, easy right?

Maybe Usefull………………..

Add Script for Responsive Facebook Video Embed With Play Onclick Event

Advertiser