BuddyX

12 min read · 2,485 words

How to Embed a Facebook Video in WordPress

Facebook video in WordPress

Embedding a Facebook video sounds like it should be a one-click operation, and on Facebook’s own platform, sharing is exactly that. The friction shows up the moment you try to bring that video onto a WordPress site you actually control. There are at least four genuinely different ways to do it, and which one is right depends on things most tutorials skip entirely: whether the video needs to autoplay, whether you’re pulling from a Page or a Group, whether you want it inside a feed of ongoing content or as a single standalone embed, and how much you care about page load speed.

Here’s a breakdown of each method, when it actually makes sense, and the specific gotchas that trip people up.

Method 1: Facebook’s native oEmbed (the fastest option for a single video)

If the goal is just “put this one video on this one page,” Facebook supports oEmbed, the same open standard WordPress uses for YouTube, Twitter, and dozens of other services. Practically, this means you can paste a Facebook video URL directly into the block editor on its own line, and WordPress will attempt to convert it into an embedded player automatically, no plugin required.

The catch: this only works reliably for videos on public Pages. A video from a private Group, a personal profile, or a Page with restricted visibility settings usually won’t embed this way, because Facebook’s oEmbed endpoint respects the same privacy rules as the platform itself. If you paste a URL and get a plain link instead of a player, that’s almost always a visibility problem on the Facebook side, not a WordPress bug.

To get the correct URL: open the video directly on Facebook (not inside a feed view), click the three-dot menu, and choose “Copy link” or “Embed.” If you use “Embed,” Facebook will actually generate an iframe code snippet for you, that code can be pasted into a WordPress Custom HTML block as an alternative to the oEmbed shortcut, and it tends to be more reliable for videos that don’t auto-convert.

Method 2: The Custom HTML block with Facebook’s official embed code

For more control over sizing, or when oEmbed doesn’t cooperate, Facebook’s own “Embed” tool (accessible from the three-dot menu on any public video) generates an iframe snippet built specifically for that video. Paste this into a Custom HTML block in the block editor rather than the classic visual editor, since visual editors frequently strip iframe tags as a security precaution.

This method gives you direct control over width and height by editing the generated code’s `width` and `height` attributes, which matters if the default embed size doesn’t fit your content column. It also tends to be more stable across theme changes than the auto-detected oEmbed version, since you’re not relying on WordPress’s embed cache correctly refreshing.

One frequent point of confusion: Facebook’s embed code includes a small SDK script tag (`fb-root` and the JavaScript SDK loader) alongside the actual video markup. Some page builders and security plugins strip inline script tags by default, which silently breaks the embed. If a Facebook embed shows a blank box instead of a video, check whether your site’s security or performance plugin is stripping that script before troubleshooting anything else.

Method 3: A dedicated Facebook feed plugin (the right call for multiple videos or an ongoing feed)

Embedding one video is a five-minute job with the methods above. Displaying an ongoing, auto-updating stream of videos from a Page or Group, so that new content you post to Facebook shows up on your site automatically, is a different problem, and it’s where a dedicated plugin earns its keep.

Plugins like Smash Balloon’s Custom Facebook Feed (the most established option in this category, with both free and paid tiers) connect to the Facebook Graph API through an OAuth login rather than scraping public pages, which is more reliable and less likely to break when Facebook changes its markup. The setup flow generally looks like this:

  1. Install and activate the plugin from the WordPress plugin directory.
  2. Go to the plugin’s settings and connect your Facebook account, granting it permission to read content from the specific Page or Group you want to display.
  3. Create a new feed, selecting “Videos” as the content type if the plugin offers content-type filtering (not every Facebook feed plugin separates video from general posts, check before committing to one).
  4. Customize layout: grid vs. list, number of videos shown, autoplay behavior, and whether captions/likes/comments display beneath each video.
  5. Insert the feed using the shortcode the plugin generates, or drop in the corresponding block/widget if the plugin ships a Gutenberg block.

The paid tiers of these plugins typically unlock HD playback, Facebook Live video support, and the ability to show engagement metrics (likes, shares, comment counts) beneath each video, useful for a business page trying to demonstrate social proof, less necessary for a personal blog just wanting to reuse video content.

Method 4: Self-hosting the video instead of embedding it

An option that gets skipped in most “how to embed a Facebook video” guides: don’t embed it at all, download it and host it directly on your own site or a video platform you control. This isn’t always appropriate (you generally need to own the content, or have explicit permission from whoever posted it, since Facebook’s terms of service govern redistribution of video content posted there), but when it is an option, it solves real problems the embed methods can’t.

A self-hosted or independently-hosted video isn’t subject to Facebook API changes breaking your embed months later. It doesn’t load Facebook’s tracking scripts on your page, which matters for both privacy and page speed. And it plays even if a visitor has an ad blocker or privacy extension that blocks third-party embeds by default, a real and growing share of traffic, given how common tools like uBlock Origin and built-in browser tracking protection have become. The tradeoff is bandwidth cost if you’re self-hosting large video files directly (a platform like Vimeo or a dedicated video host handles this better than raw WordPress media library hosting for anything beyond short clips).

Embedding Facebook Reels and Live videos specifically

Facebook Reels and Live broadcasts behave slightly differently from a standard uploaded video when it comes to embedding, and treating them identically is a common source of confusion. A Reel’s embed code, generated the same way through the three-dot menu, typically renders in a taller, vertical aspect ratio (9:16) rather than the horizontal 16:9 most WordPress themes are built around. Dropping a Reel embed into a content column sized for horizontal video usually leaves large empty margins on either side unless the theme’s CSS handles vertical media gracefully, worth testing before publishing rather than discovering it after the post goes live.

Live videos present a different problem: embedding a Live broadcast while it’s still in progress works, but the embed needs to be refreshed or re-verified once the broadcast ends and the video becomes a standard on-demand replay, since the underlying video ID and metadata can shift at that transition. If a Live embed stops working shortly after a broadcast ends, re-generating the embed code from the now-completed video (rather than the original Live link) usually fixes it.

Block editor vs. page builder: where the embed actually lives

How you embed a Facebook video depends partly on how the rest of the page was built. In the native WordPress block editor, the Custom HTML block is the most dependable home for a Facebook embed, since it passes iframe and script markup through without modification. Page builders, Elementor, Divi, Beaver Builder, each have their own equivalent (Elementor’s “HTML” widget, for instance), and the same script-stripping caveat applies: some builders sanitize embedded scripts more aggressively than the core block editor does, particularly on multisite installs or sites with strict security plugin configurations.

A detail that trips people up on page builder sites specifically: some builders cache rendered HTML output for performance, including the Facebook SDK initialization script. If you update a Facebook embed and the old video still shows, clearing the page builder’s template cache (not just a general caching plugin) is often the missing step, separate from the site-wide cache-clearing most troubleshooting guides mention first.

Embedding a public Facebook video using Facebook’s own official embed code is explicitly permitted by Facebook’s platform terms, that’s the entire purpose of providing an embed feature. Where this gets murkier is content you didn’t create yourself: embedding someone else’s video using the official tool is generally fine (you’re linking to and displaying their content through Facebook’s sanctioned method, not copying it), but downloading that same video and re-uploading it to your own site as if it were your own content is a different matter entirely, and is where actual copyright exposure lives. The distinction that matters: an embed keeps the video hosted on Facebook’s servers under the original creator’s account, with their branding and attribution intact. Self-hosting removes all of that, which is why Method 4 above only applies cleanly to content you created or have explicit written permission to redistribute.

Performance: what embedding actually costs your page

Every embedded Facebook video, regardless of which method above you use, loads at least one third-party script from Facebook’s servers, and the iframe-based methods load an entire additional document context. This is measurable, not theoretical: running a page with several embedded Facebook videos through a tool like Google PageSpeed Insights or GTmetrix typically shows Facebook’s connect.js and related resources among the largest render-blocking or main-thread-blocking scripts on the page, right alongside ad networks and other heavy third-party embeds.

A few practical mitigations:

  • Lazy-load embeds below the fold. Several Facebook feed plugins offer this as a setting; if not, a general-purpose lazy-load plugin can often be configured to defer iframe loading until the visitor scrolls near it.
  • Limit the number of embedded videos per page. A single blog post with six embedded Facebook videos will load six separate iframe contexts, each with its own script overhead, that adds up fast on a slower connection.
  • Use a thumbnail-and-click pattern for less critical embeds. Show a static thumbnail image with a play button, and only load the actual Facebook embed when the visitor clicks it. This defers the entire cost of the embed until there’s genuine intent to watch, which is a meaningfully different load profile than loading every embed on page load regardless of whether anyone watches.

Troubleshooting the embeds that don’t work

A short list of the most common failure modes, roughly in order of how often they show up:

  • Blank box where the video should be: Usually a script-stripping issue from a security or performance plugin, or the video’s privacy setting doesn’t allow public embedding. Check the video’s privacy setting on Facebook first, it needs to be set to Public, not Friends or a custom audience.
  • Embed worked yesterday, broken today: Facebook periodically updates its Graph API versions and deprecates old ones. If you’re using a feed plugin, an outdated plugin version is the most likely cause, check for an update before assuming something else changed.
  • Video shows a generic “content unavailable” message: Often means the original post was deleted, made private, or the video was removed from the source Page after the embed code was generated. Re-fetch the embed code from the live post rather than reusing an old one.
  • Embed works on desktop but not mobile: Some themes apply CSS that constrains iframe width incorrectly on smaller viewports. Check that the embed container isn’t set to a fixed pixel width that exceeds the mobile viewport, using a responsive wrapper with `max-width: 100%` on the iframe generally resolves this.

A checklist before you publish

Running through this short list before hitting publish catches most of the embed problems that otherwise surface as a stream of confused comments after the post goes live:

  • Check the embed in an incognito/private browser window. This surfaces privacy-setting problems immediately, since a video that appears fine to you (already logged into Facebook, possibly already a fan of the Page) can behave completely differently for a visitor with no Facebook session at all.
  • Test on an actual mobile device, not just a resized browser window. Facebook’s embed scripts sometimes behave differently on mobile Safari or Chrome than they do in desktop browser dev tools set to a mobile viewport, the two aren’t a perfect substitute for each other.
  • Confirm the video still plays a week later. Some of the failure modes above (Live-to-replay transitions, Graph API version deprecations) don’t show up immediately, so a quick recheck a week after publishing catches issues before they’ve been broken for months unnoticed.
  • Check page load time before and after adding the embed using a tool like PageSpeed Insights, particularly if the post already has other heavy content like image galleries or multiple embeds competing for the same render budget.
  • Verify the embed respects your cookie consent setup if the site serves visitors in regions covered by GDPR or similar privacy regulations, Facebook’s embed script sets cookies and should typically be gated behind consent rather than loading unconditionally on page load.

Which method actually fits your situation

For a single video mentioned once in a blog post, Facebook’s native oEmbed or the Custom HTML block with the official embed code is the right call, it’s fast, requires no plugin, and is easy to remove later if needed. For a business page wanting to keep a “latest videos” section continuously updated without manual work, a dedicated feed plugin like Smash Balloon justifies its setup overhead and, for the paid tier, its cost. For anyone who owns the video content outright and cares about page speed, privacy, or long-term stability more than convenience, self-hosting or using a dedicated video platform sidesteps the entire dependency on Facebook’s embed infrastructure remaining unchanged.

None of these is universally correct, the honest answer is that the “best” method depends on how often the video changes, how many videos you’re dealing with, and how much you’re willing to trade convenience for performance and control.

A quick note on Groups versus Pages

Everything above assumes the video lives on a public Facebook Page, which is the most common and most embed-friendly source. Videos posted inside a Facebook Group work differently, even a “Public” Group has different visibility defaults than a Page, and Facebook’s oEmbed and official embed tools frequently refuse to generate a working embed for Group content at all, regardless of the Group’s privacy setting. If the source video lives in a Group rather than on a Page, the more reliable path is usually to have whoever posted it re-upload or cross-post the same video to a public Page, then embed from there. Trying to force a Group video to embed through workarounds tends to produce a fragile embed that stops working the next time Facebook adjusts Group privacy handling, which happens more often than Page-level changes.

Reading
12 min · 2,485 words
Published
Apr 18, 2023
Shashank Dubey
BuddyX contributor

Writing about WordPress communities, BuddyPress, BuddyBoss, LMS plugins, and the business of paid communities.

Keep reading

More from the BuddyX blog

Browse all posts on community, WordPress, BuddyPress and the studio of plugins behind BuddyX.