Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →To embed an iframe in WordPress, start with the service’s page or media URL. In the block editor, add an Embed block, paste the URL, and click Embed. If WordPress does not recognize the provider, or the provider gives you iframe code, use a Custom HTML block instead.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
That distinction answers the questions most site owners ask: “How do I embed an iframe in WordPress?”, “Why is my iframe disappearing after I save?”, and “Should I use the Embed block or Custom HTML?” The Embed block is safer and simpler for supported services; Custom HTML gives you control over dimensions and permissions but is subject to WordPress’s HTML-sanitizing rules and your account’s editing capabilities.
As an Amazon Associate I earn from qualifying purchases.
How to embed an iframe in WordPress with the Embed block
Use this method when the provider supports WordPress oEmbed or is on WordPress’s sanctioned provider list. You do not upload the third-party page to your media library. WordPress stores a reference to the external content and asks the provider for an embeddable response.
- Copy the provider’s page or media URL. Copy the normal share URL unless the provider specifically instructs you to copy an embed URL.
- Open the post or page in the WordPress block editor. Put the cursor where the content should appear.
- Insert an Embed block. Select the plus (+) inserter, search for Embed, and choose the block. You can also type
/embedin a new paragraph block and press Enter. - Paste the URL. Paste it into the block’s URL field.
- Click Embed. WordPress contacts the provider and displays a preview when the URL is supported.
- Preview and publish. Check the front-end preview at desktop and mobile widths, not only the editor canvas.
If the block shows the provider’s content, leave the URL-based embed in place unless you have a specific need to change the generated markup. The block keeps the workflow maintainable: a future URL change is easier to make than a hand-edited HTML snippet.
#1 Best Overall
What an iframe does in WordPress
An <iframe> creates a nested browsing context: the browser loads another document inside a rectangle on your page. The embedded document remains hosted by the provider, so its scripts, forms, account system, and content policies are separate from your WordPress installation.
Embedding is therefore a link to third-party content rather than an upload. Your page may still depend on the provider being available, allowing framing, and serving the content over HTTPS. A provider can change its embed URL, require a new permission, or stop allowing frames without any WordPress setting changing.
When a provider supplies raw code, its snippet will nearly always contain an iframe tag. Keep the provider’s URL and required attributes intact. Removing an attribute that looks optional can disable playback, sizing, authentication, or communication between the frame and the parent page.
Should I use the Embed block or Custom HTML?
Both approaches can display external content, but they solve different problems. Use the Embed block first when a provider is recognized. Choose Custom HTML when you need the provider’s official snippet or attributes that the URL-driven block does not expose.
| Decision point | Embed block | Custom HTML block |
|---|---|---|
| Provider support | Best when the URL is on WordPress’s sanctioned oEmbed list and returns a supported response. | Useful when the provider is not recognized but supplies iframe markup that your account may save. |
| Setup | Paste a URL and click Embed. | Paste, review, and maintain the complete provider snippet. |
| Control | Simple URL-driven controls; available dimensions and advanced options depend on the block and provider. | Direct control over attributes such as title, width, height, loading, sandbox, and allow. |
| Security handling | WordPress’s oEmbed processing and filtering reduce the amount of code you handle manually. | You must review the source, permissions, scripts, and provider changes; WordPress can still sanitize the markup. |
| Responsive behavior | Often follows the provider or block’s generated layout; verify narrow screens. | You can set a fluid width or use the provider’s responsive wrapper, but you must test the result yourself. |
| Maintenance | Usually easier to update because the saved value is the provider URL. | More flexible, but a provider changing its snippet can require manual edits across posts. |
Do not switch to Custom HTML merely because you want a different height. First check the Embed block’s block settings and the provider’s supported options. Use custom markup when the block cannot represent a required feature, not as a default replacement.
How to embed provider-supplied iframe code with Custom HTML
Choose this route when the provider gives you a complete iframe snippet, the URL is rejected by the Embed block, or you need attributes that the URL-based block does not provide.
- Obtain the official snippet. Use the provider’s own “Embed,” “Share,” or “Add to website” control. Do not copy an iframe from an untrusted page.
- Edit the post or page. Place the cursor at the desired location and open the plus (+) inserter.
- Add Custom HTML. Select the Custom HTML block, rather than a Paragraph or Code block. The Custom HTML block is the editor component intended to render HTML.
- Paste the complete code. Preserve the provider’s
src, query parameters, and requiredallow,referrerpolicy, or other attributes. - Check the block preview. Use the block’s preview option, then use WordPress’s full post preview as well. Editor output can differ from the published page.
- Save and test as a visitor. Test while logged out or in a private browser window if the embed uses authentication, cookies, or access restrictions.
A safe starting shape, which you must adapt to the provider’s actual URL and dimensions, is:
<iframe
src="https://example.com/embed"
title="Example embedded content"
width="100%"
height="500"
loading="lazy"
style="border:0;"
></iframe>The example uses a descriptive title, a fluid width, a usable starting height, lazy loading, and no visible border. It is not a universal replacement for a provider’s code. For a video player, map, form, or dashboard, use the provider’s required URL and permissions and adjust the height after testing the actual content.
Why is my iframe disappearing after I save?
The most common cause is WordPress security filtering, not a typo in the iframe. WordPress core keeps an internal whitelist of sanctioned providers. Rich or video responses from providers outside that list can be filtered, and the result can be stripped or altered when the post is saved.
Your account’s ability to publish unfiltered HTML also matters. An iframe may appear in the editor preview, then vanish after saving because the current user does not have the capability required to preserve that markup. This is especially common on managed, multisite, or collaborative installations where administrators restrict unfiltered HTML.
Rank #3
WordPress’s filtering implementation allows only a limited set of iframe attributes and can add sandbox="allow-scripts" security="restricted" to filtered output. Those changes can affect a provider that expects a particular permission or attribute. A preview that works before saving is therefore not proof that the final page will contain the same HTML.
What an administrator can do for a trusted provider
If you control the site and have verified the provider’s trustworthiness and embed policy, an administrator or developer can register it with WordPress APIs. For an oEmbed-enabled service, the documented function is wp_oembed_add_provider(). For a service that does not use oEmbed, the documented option is wp_embed_register_handler(). Registration should be limited to a provider you understand and intend to maintain; it does not make unknown third-party code safe.
If you do not administer the site, send the provider URL and official snippet to an administrator. Ask them to confirm whether the provider is supported, whether your role can save unfiltered HTML, and whether a trusted registration is appropriate. Do not work around sanitization by pasting scripts into unrelated blocks.
Troubleshooting: URL rejected or shown only as a link
When the Embed block cannot create a preview, the URL may not be supported, may be malformed, or may be restricted by the provider.
Recommended Free Tools
- Copy the provider’s canonical share URL again and remove accidental spaces or line breaks.
- Confirm that the URL uses
https://and that the content is publicly available to the intended audience. - Look for an official iframe snippet. If one exists, use a Custom HTML block instead of repeatedly retrying the same unsupported URL.
- If the provider claims WordPress support but still returns only a link, ask the site administrator to verify the provider’s registration and the site’s oEmbed configuration.
A plain link is not an iframe. It means WordPress did not receive a supported embeddable response, so test the provider’s official embed method before publishing.
Troubleshooting: preview works but the saved iframe is gone
- Check the saved page while logged in and logged out. If it works only for you, an access rule, cookie, or editor preview may be masking the problem.
- Inspect the block after reopening the editor. If the Custom HTML block is empty or its attributes have changed, sanitization occurred during save.
- Confirm the editing capability. Ask an administrator whether the account can publish unfiltered HTML. Do not assume that every administrator-like role has the same capability on every installation.
- Check the provider list. A non-whitelisted URL may need trusted oEmbed or embed-handler registration.
- Compare the provider’s required attributes. If filtering removed a required permission, the provider may need a supported Embed block integration or administrator-approved configuration.
Troubleshooting: the iframe is blank in the browser
A saved iframe can still render as a blank rectangle when the browser or provider refuses to display the nested page. Work through these checks in order:
- Frame policy: inspect the provider’s
Content-Security-Policyandframe-ancestorsrules, as well as legacyX-Frame-Optionsbehavior. A provider that forbids framing cannot be fixed from the WordPress editor. - Mixed content: make sure the page and iframe both use HTTPS. Browsers commonly block an HTTP frame inside an HTTPS page.
- Required permissions: compare the provider’s official
allowvalues with the saved markup. Video, fullscreen, payment, geolocation, or other features may require explicit permission. - Height: inspect the element in the browser and confirm that its computed height is not zero or too small for the content.
- Authentication: determine whether the provider requires a logged-in account, a first-party cookie, or an allowed origin. Private content may be blank for visitors by design.
- Browser console: look for blocked-frame, certificate, permission-policy, or content-security errors and give those exact messages to the site administrator or provider.
Make an iframe responsive without hiding content
Set width="100%" when the frame should follow its container, or use the responsive wrapper supplied by the provider. A fixed width can overflow a phone-sized viewport even when the desktop preview looks correct.
Height needs more judgment than width. A short frame can clip a form, map controls, sign-in prompt, or dashboard. Start with the provider’s recommended height, then test the longest expected state on a narrow screen. If the embedded service has variable content, follow its responsive wrapper instructions rather than guessing a single height.
Free tools Windows power users keep installed
One-click scans. No signup required.
Test at least these states before publishing:
- Desktop width with the browser zoomed to its normal setting.
- A narrow mobile viewport where horizontal overflow is easy to spot.
- The longest form, playlist, map panel, or dashboard view the provider is expected to show.
- A slow connection, so you can see whether lazy loading and the placeholder behavior are understandable.
- Logged-out and logged-in states when the service supports accounts.
Accessibility requirements for embedded content
Give every iframe a meaningful title. The title should tell a screen-reader user what the frame contains, such as “Event registration form” or “Interactive transit map,” rather than repeating a generic label like “iframe.”
Add explanatory text outside the frame when the embedded service is essential to completing a task. Tell users what the frame is for and provide a normal link to the provider when a suitable alternative exists. The embedded service itself must also provide keyboard focus, labels, and contrast; WordPress cannot repair inaccessible controls inside a third-party document.
Best Value
Keep the frame large enough to use without precision scrolling. A title alone does not make a form usable if its controls are clipped or keyboard focus appears to disappear into a tiny viewport.
Security: permissions, sandboxing, and provider trust
Treat an iframe as third-party code. The provider can execute JavaScript inside its own document and can present forms, account prompts, or tracking technologies. Embed only services you trust and review their privacy and security policies before placing them on a page used by customers or children.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsUse the sandbox attribute when the provider works with it, then add only the tokens the service requires. Sandboxing can restrict scripts, forms, navigation, and other capabilities. MDN warns that combining allow-scripts and allow-same-origin for same-origin content can let the embedded document remove the sandbox, so review that combination rather than copying it automatically.
The allow attribute should be as narrow as practical. Preserve a provider’s required permission for features such as fullscreen, but do not grant unrelated capabilities “just in case.” If WordPress adds or removes permissions during filtering, use the supported Embed block or ask an administrator to configure a trusted integration instead of repeatedly pasting altered code.
When WordPress or the provider changes the result
There are two separate maintenance layers. WordPress can change its sanctioned-provider list and filtering behavior; the provider can change its embed URL, required attributes, or framing policy. Record which service each iframe uses so an editor can find and update it when a provider announces a change.
After a WordPress update, reopen representative posts and check both the editor and the public page. After a provider update, compare the old and new official snippet, paying particular attention to the src URL, permissions, sandbox requirements, and responsive wrapper. Replace code only with the provider’s current version.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Quick Recap
A practical decision tree
- The URL embeds successfully: keep the Embed block and adjust its available dimensions or advanced settings, then test the published page.
- The URL is rejected or becomes a plain link: obtain the provider’s official iframe snippet and place it in a Custom HTML block.
- The preview works but saving removes the iframe: check the user’s unfiltered-HTML capability and WordPress sanitization. Ask an administrator or developer about registering a trusted provider with
wp_oembed_add_provider()orwp_embed_register_handler(). - The saved frame is blank: investigate frame-ancestors or X-Frame-Options rules, HTTPS, required
allowpermissions, authentication, and height. - The content is difficult to use: improve the iframe title, add surrounding instructions or an alternative link, and verify keyboard access and labels inside the embedded service.
Final publishing checklist
- The URL or snippet comes from the provider’s official embed workflow.
- The Embed block is used when WordPress recognizes the provider; Custom HTML is used only when its extra control is needed.
- The iframe has a descriptive
title, HTTPS source, usable height, and a fluid width or tested responsive wrapper. - Only required
allowandsandboxcapabilities are granted. - The content survives saving and appears in a logged-out front-end test.
- The provider permits framing and does not return a policy, certificate, or mixed-content error.
- Users have explanatory text and an accessible path to complete the task if the third-party frame fails.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
