Getting the embed code for a Facebook video allows you to easily share and display Facebook videos on your website or blog. The embed code contains all the necessary information for the video to be played in an embedded player on your site. This provides a seamless viewing experience for visitors without having to send them offsite to Facebook.
In this article, we’ll walk through the quick and easy process for getting the embed code for any public Facebook video. We’ll also provide some tips on customizing the embedded player to match your site’s look and feel. Follow along below to learn how to embed Facebook videos in just a few simple steps.
Locate the Video Link
The first step is to locate the video you want to embed on Facebook. You can find videos posted by friends, accounts you follow, or in any public Groups you’re a member of.
Once you locate the video, click on the date/time details below the video caption. This will open up an overlay with options to share or embed the video. Click on the “Embed” button.
Example
Let’s say we want to embed this video from the official Facebook News page announcing their new desktop site layout:
https://www.facebook.com/facebook/videos/10153231379946729/
We would click on the “March 7 at 10:00 AM” text below the video caption. This opens the overlay:
We would then click the blue “Embed” button to move on to retrieving the embed code.
Copy the Embed Code
After clicking the Embed button, a window will pop up containing the embed code for that specific video. The default embed code looks something like this:
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script> <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/"> </div>
This default code will embed the video in its original size delivered from Facebook’s servers.
To use this embed code, simply copy everything in the code window. You can then paste it into the HTML of any webpage where you want the video to be displayed.
Customizing the Embed Code
The default Facebook embed code can be customized with additional parameters to adjust the appearance and layout of the embedded video player. Here are some of the most common parameters to modify:
Width and Height
You can set the exact width and height of the video player in pixels like so:
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" width="500" height="350"> </div>
This will force the video player to that specific size rather than using the default width.
Responsive Embeds
To make the embedded video responsive with your page, use a width of 100%:
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" width="100%"> </div>
The height will adjust automatically based on the video’s aspect ratio.
Autoplay
You can set the video to autoplay as soon as the page loads by adding the autoplay=true parameter:
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" autoplay=true> </div>
Muted Autoplay
To autoplay the video muted, set both the autoplay=true and muted=true parameters:
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" autoplay=true muted=true> </div>
Looping Playback
You can set the video to loop continuously by adding the loop=true parameter:
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" loop=true> </div>
Video Title
By default, the video’s title from Facebook will be shown. You can override this with your own custom title:
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" title="My Custom Video Title"> </div>
Hide Video Text
You can hide the video title, author name, publish date, and other text with:
<div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" show-text="false"> </div>
This will display a cleaner video player without text.
Troubleshooting Embeds
If your embedded Facebook video isn’t displaying properly, here are some common issues and fixes:
Missing JavaScript SDK
The Facebook embed code requires the JavaScript SDK script to be loaded. Make sure the following is included before your embed code:
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
Video Unavailable
If you get an error that the video is unavailable, it likely means the original video was deleted or the privacy settings were changed to limit visibility. Double check that the video can be viewed publicly on Facebook.
Debugging Tips
– Try clearing your browser cache and reloading the page
– Test the embed code on a blank HTML page to isolate issues
– Check the Facebook video URL is correct
– Regenerate the embed code and try pasting again
– Check for typos or missing characters in the embed code
Embedding Facebook Videos on WordPress
Embedding Facebook videos on WordPress sites is just as easy using the default WordPress embed block:
1. Copy the Facebook video URL
2. Paste the URL into a new block in the WordPress editor
3. The video will automatically embed after pasting the URL
The default width in WordPress is 560px but you can edit the block to customize the width and height. All the same customization parameters can also be added through the block interface.
Some themes and plugins like Elementor may also include dedicated Facebook video widgets to embed videos with additional custom controls.
Conclusion
Embedding Facebook videos on your website is a great way to easily repurpose engaging social media content. By following the steps above, you can quickly copy the default embed code or customize the parameters to perfectly fit your site’s design. Troubleshoot any display issues with the tips provided.
Consider embedding Facebook videos to showcase interesting clips, drive traffic from your existing Facebook following, or add visual interest to blog posts. With the Facebook JavaScript SDK loaded, the embedded video experience will be smooth and seamless for your visitors.