Recently I had to embed a facebook video in a web page and the first idea that came to my mind was to download the video and host it locally and render it on the page. But then I realized that there must be some way to embed the video directly. After a few searches I found out that there IS a way to embed the video into the page using the conventional <object> method
<object width=”300″ height=”240″ ><param name=”allowfullscreen” value=”true” />
<param name=”movie” value=”http://www.facebook.com/v/1671900191543″ />
<embed src=”http://www.facebook.com/v/1671900191543″ type=”application/x-shockwave-flash” allowfullscreen=”true” width=”300″ height=”240″>
</embed>
</object>
In the times of HTML5 and CSS3 where you can embed video directly using the <video> tag this seems a tad historic and an overkill.
Recently youtube introduced a new HTML5 compatiable method of embedding videos onto webpages that involve using the <iframe> tag. A sample code for the same would be
<iframe type=”text/html” width=”640” height=”385” src=”http://www.youtube.com/embed/VIDEO_ID" frameborder=”0”></iframe>
If you use the new embed code style, viewers will be able to view your embedded video in Flash or HTML5 players, depending on their viewing environment and preferences. In instances where HTML5 isn’t supported,Flash is used.
I realized that the same method can be used to embed Facebook videos as well. Just replace the source (src) tag in the code to point the path of the video and facebook and lo and behold you have your video, like this
Though getting the url of the video from facebook it a slightly tricky process. For instance the direct link to the video above is
http://www.facebook.com/photo.php?v=235165436549544&set=vb.143296689103723&type=2&permPage=1
But if you try to set this as the src of the tag it simply won’t work. The direct link to the video would be
http://www.facebook.com/v/**235165436549544**
I have not tried this on all browsers ( “cough” IE “cough” ) but it works fine on most modern browsers.
Try this and let me know how it works out for you.
Found this post helpful! Subscribe to my newsletter here !
I have helped many startups in building their products and I would be happy to have a chat with you about your idea. Catch me on twitter at @akhilrex
