Wednesday, 13 April 2016

How to embed facebook video in mobile friendly websites

Well, in this post I want to talk about how you can embed a facebook video on a mobile friendly websites. By mobile friendly websites I mean a website when you visit with a mobile it shows you the contents in a slightly different way. If you work with website coding and stuff then you'll definitely know what I'm talking about.
AD


Any way coming to the main point. Recently I've noticed that when you try to get facebook embed code, it gives you an iframe which looks like this.

<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffailarmy%2Fvideos%2F1003445046419324%2F&show_text=0&width=560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Note: If you just copy the link from the iframe and paste in the addressbar then it will not work. So first you'll need to get the actual link from it by changing a bit.
%3A = :
%2F = /
So now we know that the actual link is https://www.facebook.com/failarmy/videos/1003445046419324/

And let's now talk about the problem, when you give a certain width and height to an iframe it gets kind of difficult for mobile sites. So instead of making iframe you can use automatic script which will sort all the problems. I mean when you use the script it will make it small for mobile sites and will make bigger for desktop sites. Let's see the script then.

<div id="fb-root">
</div>
<script>(function(d, s, id) {  var js, fjs = d.getElementsByTagName(s)[0];  if (d.getElementById(id)) return;  js = d.createElement(s); js.id = id;  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-video" data-allowfullscreen="1" data-href="https://www.facebook.com/failarmy/videos/1003445046419324/">
</div>

Now you can just copy the script above and paste into your site and make sure you change the link to your own. The video below is an example of the script, and if you don't see the video then that means video might be deleted.


AD

2 comments:

  1. Hey, thank you so much for this tip! I've been wondering if this is possible for a while! Much appreciated :)

    ReplyDelete