The Best Way to Embed Facebook Video on Your Website Effortlessly

To embed a Facebook video on your website, open the video, click the three dots, choose Embed, and paste the iframe code Facebook generates into your site’s HTML. That is the fastest way to place a single video, and Facebook’s built-in Embed dialog is free, so you do not need a third-party Facebook video embed code generator. If you want more than one video, or a section that refreshes itself whenever you post, use a social media aggregator like Juicer to embed an auto-updating Facebook video feed with one snippet of code.

Here is the exact copy-paste iframe you get, so you can see what you are working with before you start:

<iframe
  src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F12345678901234%2F&show_text=false&width=476&t=0"
  width="476"
  height="476"
  style="border:none;overflow:hidden"
  scrolling="no"
  frameborder="0"
  allowfullscreen="true"
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>

Swap the href value for your own video URL and adjust width and height, and the video will play inside your page. The rest of this guide walks through getting that code, embedding Facebook Reels and Live videos, making a video autoplay, platform-specific steps for WordPress, Shopify, Wix, and plain HTML, and how to swap a single fixed embed for an always-updating feed.

How to Embed a Facebook Video (Step by Step)

Facebook has a built-in embed code generator that creates the HTML you need to display any public video on another website, so you do not need a separate third-party Facebook video embed code generator. The code it produces is an iframe, which is what people usually mean when they search for the Facebook video source code. Here is how to get it and embed a Facebook video manually:

1. Open Facebook and go to the video you want to embed (its URL will look like facebook.com/<page>/videos/<id>/, facebook.com/reel/<id>/, or a facebook.com/watch/ link).
2. Click the three dots (⋯) at the top right of the post.
3. Choose Embed from the drop-down menu.
4. Copy the generated HTML iframe code. It will include a src starting with https://www.facebook.com/plugins/video.php and other details.
5. Paste the code into your website’s HTML editor where you want the video to appear.
6. Adjust the custom HTML if you need to change the size or appearance.

The key parameters in the Facebook iframe embed code are:

• src: the source URL (always starting with https://www.facebook.com/plugins/video.php) that links to Facebook’s video player.
• href: the encoded URL of the specific Facebook video being embedded.
• width and height: the dimensions of the embedded video player.
• show_text: set to false to hide the original post text, or true to show it.
• allowfullscreen: enables full-screen viewing.
• allow: permissions for specific features such as autoplay.

The JavaScript SDK alternative. Facebook also supports a second official method using its JavaScript SDK and a div element instead of an iframe. This version gives you a few extra attributes, including a dedicated autoplay setting:

<div class="fb-video"
  data-href="https://www.facebook.com/facebook/videos/12345678901234/"
  data-width="500"
  data-show-text="false"
  data-autoplay="true"
  data-allowfullscreen="true">
</div>

With the SDK method you point data-href at the video URL and control the display through data-width, data-show-text, data-allowfullscreen, and data-autoplay. You also need to load Facebook’s SDK script once on the page for the fb-video div to render.

The manual approach works well for basic needs, but it has real limitations. Customization is restricted to what Facebook exposes in the embed code. You cannot embed multiple videos at once, so each video has to be added individually. When you post new videos to Facebook, your website will not show them automatically: you have to add each new embed code by hand. The default embed code can also cause layout issues on mobile unless you adjust the CSS.

To improve the appearance, you can wrap the iframe in a container with custom CSS:

<div class="facebook-video-container">
  <iframe
    src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F12345678901234%2F&show_text=false&width=476&t=0"
    style="border:none;overflow:hidden"
    scrolling="no"
    frameborder="0"
    allowfullscreen="true"
    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
  </iframe>
</div>

With accompanying CSS that keeps the video responsive at a 16:9 ratio (set the size in CSS, not with an height="auto" HTML attribute, which browsers ignore):

.facebook-video-container {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
}

.facebook-video-container iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

For more detail on the manual approach, see Facebook’s official documentation on embedded videos.

One thing to know up front: embedding a Facebook video simply means displaying a video that lives on Facebook directly inside one of your own web pages, so visitors can watch it without leaving your site. The video post has to be public for the embed code to work on an external site.

How to Embed Facebook Reels (and Make Them Autoplay)

You can embed Facebook Reels on your website the same way as any other video. Open the Reel, click the three dots, and choose Embed to generate the iframe code, then paste it into your site exactly as you would a standard video. As with all embeds, the Reel must be public for the code to display on an external site.

The most common question about Reels is autoplay, and it is worth being precise about what is possible. Browsers and Facebook both restrict autoplay to protect users, so an embedded Reel can autoplay only when it is muted, and autoplay generally does not apply on mobile devices, where the visitor has to tap to start playback. To control the Facebook Reel embed code autoplay behavior, use Facebook’s JavaScript SDK version of the embed code and set the autoplay attribute (it plays muted):

<div class="fb-video"
  data-href="https://www.facebook.com/reel/1234567890123456/"
  data-width="350"
  data-autoplay="true"
  data-show-text="false">
</div>

This autoplay setting only works with Facebook’s JavaScript SDK (the fb-video div), so the SDK script must be loaded on your page. The standard iframe Embed code has no autoplay parameter.

If you want Reels to autoplay as part of a wider feed rather than one at a time, Juicer pulls your Reels into the same Facebook feed as your other videos and has its own autoplay setting you can toggle on. Because autoplaying many videos at once hurts page speed, Juicer recommends limiting autoplay to around 24 posts per page, which keeps the experience smooth.

How to Embed Facebook Live Videos and Stories

You can embed a Facebook Live video on your website both during and after a broadcast, using the same Embed option you use for a standard video, which makes Live useful for events, launches, and webinars you want to feature on your site. After the stream ends, the Live video stays embeddable as a regular video as long as the post remains public.

Facebook Stories are a different case: because they disappear after 24 hours, there is no durable embed code for an individual Story. The practical way to keep Stories-style content on your site is to embed an auto-updating feed so new short-form posts appear automatically as you publish them, rather than embedding any single clip by hand. For live and short-form content that changes often, an automatically refreshing feed is far more reliable than a fixed iframe.

Embed an Auto-Updating Facebook Video Feed with Juicer

A single iframe is fine for one fixed video, but it is fragile: if that video is later deleted or made private, the embed simply breaks, and adding every new video by hand quickly becomes a chore. Juicer solves both problems by embedding a feed instead of a single video. As a social media aggregator, Juicer lets you display your Facebook videos in a responsive feed whose width and column count you control, and it updates automatically.

Using Juicer instead of manual embedding has several advantages. Your embedded Facebook video feed refreshes on a schedule (anywhere from every few minutes to once a day, depending on your plan), so it keeps showing your newest videos without any manual work. Customization options let you match your brand by adjusting colors, layout, and spacing. Juicer’s responsive design ensures your Facebook videos look good on every device without additional coding, and its built-in moderation tools let you filter which videos appear based on keywords, engagement, or manual approval.

Juicer also gives you analytics on how visitors engage with your embedded videos, and you can pull in videos from multiple platforms alongside Facebook, such as Instagram, TikTok, YouTube, and X, to build a single social media hub on your site. If your goal is a continuously fresh wall of Facebook content rather than one video, see our full guide to embedding a Facebook feed on your website.

Getting started with Juicer is easy and does not require any technical skills. The process takes only a few minutes.

First, create a Juicer account by visiting Juicer.io and signing up for a free account. Once registered, you will land on the dashboard where you can set up your Facebook video feed.

Next, connect your Facebook account by adding a new source and choosing Facebook from the available platforms. Authenticate when prompted and choose the Facebook Page whose videos you want to display. Juicer will fetch the existing posts and prepare them for embedding. Note that only public video posts can be displayed.

Once your account is connected, customize your Facebook feed to match your website’s design. Choose a layout (grid, slider, or list), set colors that match your brand, and decide how many posts to show and what to display alongside each video.

To put the feed on your website, open the embed section of your Juicer dashboard (the Embed in Your Site option). This generates a JavaScript snippet that you copy and paste where you want the videos to appear. It works on any platform, from WordPress to custom HTML sites:

<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
<ul class="juicer-feed" data-feed-id="your-feed-id"></ul>

Juicer works as a feed-level embed code generator, producing all the HTML, CSS, and JavaScript automatically. Unlike a single manual iframe, this embed code handles responsive design, lazy loading, and dynamic content updates for you, with no extra code required.

Finally, use Juicer’s moderation tools to manage which videos appear. The moderation dashboard lets you approve or hide specific videos and set rules that filter content by keyword, so your feed stays on-brand and fresh.

Platform-Specific Instructions

WordPress

To embed a Facebook video in WordPress manually:

1. Log in to your WordPress admin dashboard.
2. Create a new post or page, or edit an existing one.
3. Add a Custom HTML block (or switch to the Code editor).
4. Paste either your Facebook iframe code or your Juicer embed code.
5. Save and publish your changes.

For the Juicer feed, the block contents look like this:

<script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
<link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
<ul class="juicer-feed" data-feed-id="your-feed-id"></ul>

Alternatively, install the free Juicer WordPress plugin and add your feed with a simple shortcode, with no HTML editing required:

[juicer name="your-feed-slug"]

The shortcode value is your feed’s slug from the Juicer dashboard. WordPress powers over 40% of all websites, so embedding Facebook videos here is one of the most common use cases. For a feed rather than a single video, follow our dedicated guide to embedding a Facebook feed in WordPress, and if you build with Elementor, see how to embed Facebook content with Elementor.

Shopify Website

1. Go to your Shopify admin panel.
2. Navigate to Online Store > Themes.
3. Pick one of two paths. Either click Customize, add a section or block, and search for Custom Liquid; or click Actions > Edit code to edit a template or section file directly.
4. Paste the Juicer embed code or the Facebook iframe code into the Custom Liquid block (or the template file).
5. Save your changes.

Example for a Shopify section:

<div class="facebook-video-section">
  <h2>Our Latest Videos</h2>
  <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
  <link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
  <ul class="juicer-feed" data-feed-id="your-feed-id"></ul>
</div>

For a full walkthrough, see our guide to adding a social media feed to a Shopify website.

Wix Website

1. Edit your Wix page.
2. Click Add Elements (the + button) on the left side of the editor.
3. Select Embed Code > Embed HTML.
4. For manual embedding, paste your Facebook iframe code. For Juicer, paste your Juicer embed code.
5. Click Update and publish your site.

The HTML embed element in Wix gives you a code editor where you can paste either the Facebook iframe or the Juicer embed script. For direct Facebook embedding in Wix, use:

<iframe
  src="https://www.facebook.com/plugins/video.php?height=476&href=https%3A%2F%2Fwww.facebook.com%2Fyourpage%2Fvideos%2F123456789%2F&show_text=false"
  width="100%"
  height="476"
  style="border:none;overflow:hidden"
  scrolling="no"
  frameborder="0"
  allowfullscreen="true"
  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share">
</iframe>

For more detail, see our guide on how to add social feeds to a Wix website.

HTML Websites

To embed a Facebook video in raw HTML, paste the iframe directly into your file wherever you want the video to appear:

<div class="video-section">
  <h2>Featured Facebook Video</h2>
  <div class="video-wrapper">
    <iframe
      src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F12345678901234%2F"
      width="560"
      height="314"
      style="border:none;overflow:hidden"
      scrolling="no"
      frameborder="0"
      allowfullscreen="true">
    </iframe>
  </div>
</div>

For an auto-updating feed on a plain HTML site, paste the Juicer embed code instead:

<!-- Your existing HTML content -->
<div class="your-container">
  <script src="https://assets.juicer.io/embed.js" type="text/javascript"></script>
  <link href="https://assets.juicer.io/embed.css" media="all" rel="stylesheet" type="text/css" />
  <ul class="juicer-feed" data-feed-id="your-feed-id"></ul>
</div>
<!-- More HTML content -->

Customizing Your Embedded Facebook Videos

Juicer offers extensive customization so your Facebook video feed matches your website’s design, ensuring embedded videos enhance rather than disrupt your site’s look.

For size and layout, you can set a custom width or use responsive settings that adapt to your container. Choose a layout type (grid, slider, or list) based on how you want videos displayed, and adjust the post density to set how many videos appear per row, from a compact gallery to a spacious view.

Style settings let you personalize the feed’s appearance. Match your brand palette by customizing background, text, and highlight colors, and add borders, shadows, and spacing so the feed either stands out or blends in. For typography and any effect not covered by the standard options, you can add your own custom CSS, which is the route to applying brand fonts and advanced styling.

Juicer is mobile-optimized out of the box, and you can further tune the experience by adjusting how the feed displays on smaller screens and how quickly it loads for mobile users. You can also add a call to action to encourage visitors to engage with your content.

Advanced settings give you more control over playback. You can enable or disable autoplay based on your user-experience goals, choose how videos appear as users scroll to them, and decide whether videos play automatically or on click. Because autoplay affects performance, it is best applied to a limited number of videos at a time.

Common Issues and Troubleshooting

When embedding Facebook videos, you may run into these common issues.

Videos Not Displaying

If a Facebook video is not showing on your website, the most frequent cause is privacy: only publicly shared videos can be embedded on external sites, so check that the video and its Page are public. The next most common cause is faulty embed code, since a single error in a manually pasted iframe can stop it from rendering.

Common mistakes in manual Facebook embed code include:

• An incorrect URL format in the src="https://www.facebook.com/plugins/video.php" attribute.
• Missing or malformed parameters in the URL query string.
• Removed or altered essential attributes such as allowfullscreen or frameborder.

Videos can also fail to load if they have been deleted from Facebook or are subject to regional restrictions. If your embedded video is not displaying, visit the direct Facebook URL to confirm the video still exists and is public.

Juicer avoids most of these issues by handling the connection to Facebook for you. If a video is public on Facebook, it appears in your feed without manual embed-code troubleshooting, and because Juicer embeds a feed rather than a single hard-coded video, one deleted post will not break the whole section.

Responsive Design Problems

Responsive issues are common with manually embedded Facebook videos. Fixed dimensions in the default embed code can make videos appear too large on mobile or too small on desktop, a lack of responsive containers prevents proper scaling, and CSS conflicts between your site and Facebook’s player can create unpredictable display problems.

To make a manually embedded Facebook video responsive, add custom CSS:

.facebook-video-responsive {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.facebook-video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

And wrap your iframe in the container:

<div class="facebook-video-responsive">
  <iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F12345678901234%2F" allowFullScreen="true"></iframe>
</div>

Juicer avoids this work by producing feeds that adapt to any screen size automatically, handling device detection and scaling so your Facebook videos look right on phones, tablets, and desktops.

For more on responsive design, see Mozilla’s Web Docs on responsive design.

Loading Speed Issues

Performance can suffer when too many embedded videos load at once, since each Facebook iframe adds HTTP requests and connection overhead that can slow the whole page.

To improve loading speed with manual embeds, add the loading="lazy" attribute so the browser only loads the video when the visitor scrolls to it:

<iframe
  src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F12345678901234%2F"
  width="560"
  height="314"
  loading="lazy"
  allowFullScreen="true">
</iframe>

Juicer has a lazy-load setting that does this for you, loading videos only as users reach them so the page stays fast even with a full feed.

Website performance guidance from Google’s web.dev recommends exactly this kind of lazy loading to keep a site responsive when it includes embedded media.

Why Embed Facebook Videos on Your Website

Before the how-to, it helps to know why this is worth doing. Facebook videos come in several formats, and all of the public ones can be embedded: native videos uploaded to a Page or profile, Reels (short vertical videos), Live videos (streams you can embed during or after the broadcast), and Stories (short clips that expire after 24 hours). Video now dominates the time people spend on Facebook and Instagram: Meta has reported that video makes up well over half of the time people spend in its apps.

Adding that content to your web pages has several benefits that improve both how your site performs and how visitors feel about it. Videos make people more engaged than plain text or images, so embedding Facebook video content creates richer experiences that hold visitors on your pages longer. Social proof is another major advantage: when site visitors see real Facebook videos on your site, it builds trust and credibility, and user-generated videos and testimonials go a long way toward establishing brand authority.

On an SEO level, embedded videos tend to keep users on your site longer, which signals to search engines that your content is valuable and can help improve rankings and visibility. The user-experience gains are just as real: videos can explain difficult subjects, show products in action, or tell a story more clearly than text, which helps your audience understand and remember the information. Facebook videos can also draw new people to your website when they discover your content elsewhere, extending your reach beyond your existing visitors. Finally, embedding is a low-cost form of promotion: the videos are already made, and embedding them extends their audience with no extra production cost.

Here are some figures worth noting. According to a 2025 study by Wyzowl, 99% of video marketers say video has helped increase user understanding of their product or service, an all-time high. 96% say it has boosted brand awareness, up from 90% in the 2024 report, and 84% say video has directly increased sales. The takeaway is clear: businesses should be using video content across both their social media pages and their websites.

Best Practices for Displaying Facebook Videos

To get the most from your embedded Facebook videos, keep these tips in mind.

Placement affects engagement. Position important videos above the fold so visitors see them as the page loads, and place videos near related text to give them context. On landing pages, a compelling video near the top can lift conversions by capturing attention immediately.

Content selection matters. Choose videos that match your audience’s interests and your site’s intent, and mix educational, entertaining, and promotional content. Prioritize videos that already performed well on Facebook, since high engagement there is a good signal of what will resonate on your site.

Keep it fresh. A regular publishing rhythm gives visitors a reason to return. With a Juicer feed, new videos you post to Facebook appear automatically, and you can hide older clips that are no longer relevant. Featuring seasonal or event-based content at the right time keeps the feed current.

Watch performance. Monitor load times when you embed multiple videos and adjust as needed, use lazy loading and caching to keep things fast, and test your embeds across different devices and browsers so the experience is consistent for everyone.

Conclusion

Embedding Facebook videos on your website is a proven way to boost engagement, social proof, and time on page. Manual embedding with Facebook’s own iframe code works well for a single fixed video, while a tool like Juicer is the more durable choice when you want an automatically updating feed, deeper customization, and ongoing management without touching code.

With Juicer, you get a responsive Facebook video feed that updates itself and matches your brand, which saves you time while giving visitors a better experience. Ready to showcase your Facebook videos? Try Juicer for free and see the difference an automated social media feed makes, or explore Juicer’s Facebook aggregator to see everything it can do.

Want to embed other content too? Check out our guides on embedding Instagram Reels, adding TikTok videos to your website, and using a Facebook widget for your website.