Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
How do I embed an iframe in WordPress? For a service WordPress recognizes, copy its page or media URL, add an Embed block, paste the URL, and select Embed. If the provider gives you raw iframe code or WordPress rejects the URL, use a Custom HTML block instead. Why is my iframe disappearing after I save? WordPress filters iframe markup for security, and users without permission to publish unfiltered HTML can have that code removed or changed.
This guide explains both methods, when to choose each one, how to make an iframe responsive and accessible, and how to diagnose rejected URLs, blank frames, mixed-content errors, and disappearing embeds.
What an iframe does in WordPress
An iframe (inline frame) places another web document inside a page on your site. The embedded document remains hosted by the provider; your WordPress installation displays it in a nested browsing context rather than uploading or copying the provider’s files. This is why a video player, map, booking form, dashboard, chart, or other widget can update independently of your page.
The provider controls the document inside the frame. Your page controls the frame’s size and some browser permissions, subject to WordPress filtering and the provider’s own security policy. The provider can also require JavaScript, cookies, authentication, or a particular frame size. A frame that is technically present may therefore still show a sign-in screen, an error, or a blank area.
#1 Best Overall
How to use WordPress’s Embed block
The Embed block is the simplest and safest starting point when the provider supports WordPress oEmbed or is on WordPress’s sanctioned provider list.
- Open the post or page in the WordPress block editor.
- Select the + inserter, search for Embed, and add the block. You can also type
/embedin a new paragraph block and press Enter. - Paste the provider’s page, media, or share URL into the field.
- Select Embed. WordPress requests the provider’s embed response and displays a preview when the URL is supported.
- Use the block toolbar and sidebar settings to adjust alignment and any dimensions the block exposes. Save a draft, open the editor preview, and check the published view on a narrow screen before releasing the page.
Use the provider’s canonical HTTPS URL, not a URL copied from a private administrative screen. Some services require a share link or an embed-specific URL; the provider’s instructions take precedence.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
What the Embed block creates
The URL-driven workflow creates a reference to third-party content. It does not import that content into your media library, and it does not give you control over the provider’s internal HTML. This keeps maintenance low, but it also limits control over attributes such as a custom title, sandbox policy, or a precise height.
How to use a Custom HTML block for raw iframe code
Choose Custom HTML when a provider supplies an iframe snippet, when the URL is not recognized by oEmbed, or when you need attributes that the Embed block does not expose. WordPress Developer guidance notes that the embed code nearly always contains an iframe tag.
- Obtain the official embed snippet from the provider. Copy it as supplied, including the complete HTTPS URL and any required permissions.
- In the block editor, select +, search for Custom HTML, and insert the block where the frame should appear.
- Paste the code into the block. Do not paste untrusted code from an unknown source.
- Select Preview in the block or use the editor’s full preview to verify the result. Publish only after checking the front end in the browsers and screen sizes your visitors use.
A neutral starting pattern looks like this; replace the URL, title, and height with the provider’s documented values:
<iframe src='https://example.com/embed' title='Example embedded content' width='100%' height='500' loading="eager" style='border:0;'></iframe>The title describes the frame to screen-reader users. A width of 100% lets the frame follow its container, while the height must be large enough for the actual content. If the provider gives you a responsive wrapper or script, retain it rather than replacing it with a fixed-size frame.
Attributes you may need
srcidentifies the document to load and should normally use HTTPS.titlegives the frame an accessible name; make it specific, such as Store locator map or Customer support request form.widthandheightset the initial dimensions. A percentage width is usually more adaptable than a fixed pixel width.loading='lazy'defers loading until the frame approaches the viewport, which can reduce initial page work for embeds lower on the page.allowgrants selected browser capabilities, such as autoplay or fullscreen, when the service requires them. Grant only the capabilities documented by that service.sandboxadds restrictions to the embedded document. Start with a restrictive sandbox and add only the tokens the provider needs.
Should you use the Embed block or Custom HTML?
Both approaches can display an iframe, but they solve different problems.
| Consideration | Embed block | Custom HTML |
|---|---|---|
| Provider support | Best when the URL is recognized by WordPress oEmbed or its sanctioned provider list. | Useful when the provider is not recognized but supplies an official snippet and your account may save it. |
| Setup | Paste a URL and select Embed; no markup editing is required. | Paste and maintain the provider’s HTML, including required attributes. |
| Control | Limited control over dimensions, permissions, and other iframe attributes. | Direct control over width, height, title, loading, sandbox, and allow attributes, subject to WordPress filtering. |
| Security maintenance | WordPress’s oEmbed handling and filtering provide a more managed path. | You must review the source, requested permissions, scripts, and future provider changes. |
| Responsive behavior | Depends on the block and provider output; test on narrow screens. | You can set a responsive width or retain the provider’s wrapper CSS, but you are responsible for testing it. |
Try the Embed block first for a supported provider. Move to Custom HTML only when you need the provider’s snippet or additional control and you trust the source.
Rank #3
Make an iframe accessible and responsive
Provide a meaningful title
Every iframe should have a descriptive title. A label such as Embedded content does not tell a screen-reader user what is inside. Name the purpose and, where useful, the context: Conference registration form, Interactive sales chart for 2025, or Downtown branch map.
Surround the frame with a short explanation when the visual alone is not enough. State what the visitor can do, whether a separate account is required, and where to find an equivalent non-embedded option if one exists. The controls inside the third-party document must also be keyboard usable and have their own labels; an outer title cannot repair inaccessible content inside the frame.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC 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 & 11Prevent clipped or unusable content
Set a height that accommodates the complete form, dashboard, or player. A frame that is only 150 pixels high may technically load while hiding the submit button or requiring awkward nested scrolling. If the provider documents a minimum height, follow it. Check long labels, validation messages, and error states, not just the initial view.
Use width='100%' or the provider’s responsive wrapper where possible. Test at a phone width, a tablet width, and a large desktop width. Look for horizontal scrolling, controls pushed below the visible area, and text that becomes too small. A percentage width cannot compensate for a fixed height that is too short, so test both dimensions together.
Limit permissions
The allow attribute can enable capabilities such as fullscreen, autoplay, camera, microphone, or payment features. Include only what the service needs. An embedded video may require fullscreen, while a static chart usually needs none.
Use sandbox when practical and add the minimum tokens required for the service. MDN cautions that combining allow-scripts and allow-same-origin for same-origin content can allow the embedded document to remove the sandbox, so review that combination carefully. Do not add broad permissions merely because a generated snippet contains them; confirm each one with the provider’s documentation and your site’s threat model.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Keep transport and framing policies compatible
Use HTTPS for the page and the frame. An HTTPS page loading an HTTP iframe can trigger mixed-content blocking in the browser. A provider can also prohibit framing with Content-Security-Policy frame-ancestors or the older X-Frame-Options header. Those policies are enforced by the browser and cannot be fixed by changing a WordPress block. The provider must permit your site’s origin, or you need a different integration method.
Why is my iframe disappearing after I save?
An iframe that appears in the editor but vanishes, changes, or becomes a plain link after saving is usually being sanitized. WordPress core maintains an internal whitelist of providers and filters non-whitelisted rich or video responses for security. Its filtering implementation permits a limited set of iframe attributes and can add sandbox='allow-scripts' and security='restricted' to filtered output.
Best Value
Check your account’s HTML capability
Some user accounts cannot publish unfiltered HTML. If your role lacks the unfiltered_html capability, WordPress may remove an iframe or strip attributes when the post is saved. A multisite network can apply additional restrictions. Ask a site administrator to confirm whether your account is allowed to save this markup; do not try to bypass the filter by repeatedly pasting the code.
Confirm that the provider is trusted and supported
If the provider is outside WordPress’s sanctioned list, a URL submitted to the Embed block may be rejected or reduced to a link. A Custom HTML block may also be filtered when your account cannot publish unfiltered markup. Obtain the provider’s official snippet and verify its domain, but recognize that trusted code still has to pass WordPress’s capability and sanitization rules.
Use an administrator or developer for a permanent integration
When a non-whitelisted service is trustworthy and necessary, an administrator or developer can register it with WordPress APIs after reviewing its embed policy. WordPress documents wp_oembed_add_provider() for oEmbed-enabled providers and wp_embed_register_handler() for services that do not use oEmbed. Registration should be limited to a provider you control or have carefully vetted; it changes how future content from that service is accepted.
Troubleshooting: the URL is rejected or only a link appears
- Check the URL type. Replace a private, shortened, or administrative URL with the provider’s public share or embed URL.
- Try the Embed block again. Add a fresh block, paste the URL without extra text, and select Embed.
- Look for an official iframe option. If the service documents a code snippet, use that code in a Custom HTML block.
- Check permissions. If the code disappears on save, an administrator must review the account’s unfiltered-HTML capability or implement a trusted provider registration.
- Do not iframe a page that forbids framing. A provider’s frame-ancestors or X-Frame-Options policy must allow your site.
Troubleshooting: the frame is blank in the browser
A blank frame means the element may exist even though its document was refused or failed to render. Open the browser developer console and network panel on the published page, then check these causes:
- Framing policy: look for messages mentioning
frame-ancestorsorX-Frame-Options. Only the provider can change a policy that blocks your origin. - Mixed content: change an HTTP source to the provider’s HTTPS endpoint and ensure redirects do not return to HTTP.
- Missing permissions: compare the provider’s required
allowtokens with your markup. Add only the documented capabilities. - Authentication or cookies: test in a private window and confirm whether the service requires the visitor to sign in or accept third-party cookies.
- Insufficient height: inspect the frame’s computed dimensions. A zero or very small height can look like a failed load.
- Provider outage or URL change: open the source URL directly. If it fails there, contact the provider or replace the embed.
Test the published page, not only the editor preview. Caching, security plugins, a content-security policy, or a theme stylesheet can change front-end behavior.
Troubleshooting: the frame works on desktop but not on mobile
- Set the frame or its wrapper to
max-width: 100%and avoid a fixed width wider than the content column. - Retain the provider’s responsive wrapper when one is supplied.
- Increase the height for mobile forms that stack fields vertically.
- Check whether a theme rule applies
overflow: hiddenor scales the iframe unexpectedly. - Rotate the device and test keyboard focus where mobile browsers support an external keyboard.
If a provider’s widget is designed only for desktop, state that limitation near the frame and offer a direct link to the service as a fallback.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Security and maintenance checklist
- Use an HTTPS source from a provider you trust.
- Review every script, form, redirect, and permission requested by the embedded service.
- Give the iframe a specific title and a usable height.
- Prefer the Embed block for recognized providers; use Custom HTML only with an official, reviewed snippet.
- Use
sandboxwhere practical and add only necessary tokens. - Retest after changing themes, security settings, caching, or the provider’s embed code.
- Check the frame on the published URL, in a logged-out window, and on a mobile viewport.
- Provide explanatory text and a non-embedded alternative when the content is essential.
A practical decision tree
- The URL embeds successfully: keep the Embed block, adjust available settings, and verify dimensions on mobile.
- The URL is rejected or becomes a link: obtain the provider’s official iframe snippet and place it in Custom HTML.
- The preview works but saving removes the iframe: check the account’s unfiltered-HTML capability and WordPress sanitization; ask an administrator or developer about registering a trusted provider.
- The published frame is blank: investigate frame-ancestors or X-Frame-Options, HTTPS, required
allowpermissions, authentication, and height. - The content is inaccessible: improve the iframe title and surrounding instructions, then verify keyboard access and form labels inside the third-party service.
Final recommendation
Use the Embed block whenever WordPress recognizes the provider: it requires only a URL and follows the platform’s managed embed path. Use Custom HTML when the provider supplies raw iframe markup or you need precise attributes, but treat that code as third-party software, limit its permissions, and expect WordPress to filter it when your account or the provider is not trusted. Always validate the saved, published result at desktop and mobile sizes rather than relying on the editor preview alone.
Quick Recap
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.
