Facebook has now allowed a simple way to include Facebook videos on your blog or website. So when you have some Facebook videos you want to include on your blog or website, you can easily embed it by following the simple steps below.
Before we proceed on how to embed Facebook videos you must consider these to things:
- One is that you must ensure that the Facebook video you will post on your blog/website is publicly shared and;
- The other thing is that Facebook still uses the Adobe Flash player to embed videos when your website is viewed on a desktop. It automatically switches to the HTML5 format on mobile devices but if someone is viewing your website from a desktop or laptop, they would need the Shockwave Flash plugin enabled to view your embedded videos.
How to Embed Facebook Videos on Your Blog/Website
First, go to the search box and type a search query like videos of cats liked by my friends or videos uploaded by me or videos uploaded by my friends of friends. Or, if someone have shared to you a video or you have seen an interesting video on your wall, you can use it right away.
Next click the video thumbnail to open the video play in a lightbox window. Hover your mouse over Options and choose Embed Video from the drop-down. Facebook will provide a snippet of code that you can directly copy and paste in your website template or your blog post.
Note: You need to be logged in on Facebook to get the embed code.
You can see a sample embedded facebook video below:
Im trying not to laugh but this was good lmao.Watch this beast train in the gym below!https://www.youtube.com/watch?v=dr_cT_BIvaYPosted by ROCK-SOLID on Tuesday, March 3, 2015
The embedded videos are responsive and occupy the full width of the parent div. If you would like to constraint the video width or need to wrap text around the video, you’ll need to modify the .fb-video class as show in the snippet below:
<style>.fb-video {/* Do not occupy the full width*/max-width: 300px !important;/* Align the video to the right of a page and wrap the text */float: right;/* Add a Grey border to the video */border: 2px solid grey;}</style>