Originally published: December 21, 2020 · Last updated: August 13, 2026
An <iframe> lets a WordPress page display content hosted on another web page. It is commonly used for maps, forms, dashboards and specialist embeds that do not have a native WordPress block.
Use iframes selectively. Every iframe can load an additional document with its own assets, so it may affect performance and privacy.
Prefer a native WordPress embed when one exists
If the service is already supported by an Embed block or a dedicated integration, use that first. Native integrations are usually easier to maintain and often handle responsive behavior automatically.
Add an iframe with the Custom HTML block
When a provider gives you iframe code, add a Custom HTML block and paste the supplied markup there. A simple iframe normally contains a source URL, a title and dimensions.
The title attribute is important for accessibility because it explains the purpose of the embedded content to users of assistive technology.
Make the embed responsive
Fixed-width embeds can overflow on phones. Test the page at several screen sizes and use responsive CSS or the provider’s responsive embed option when available. Modern CSS should control presentation rather than old iframe styling attributes.
Use lazy loading where appropriate
An iframe below the first screen does not always need to load immediately. Lazy loading can reduce the initial amount of work performed by the browser. WordPress has supported lazy loading for many iframe scenarios for several years.
Some pages cannot be embedded
The external provider decides whether its pages may be displayed inside another site. If an embed remains blank or produces a refusal message, check the provider’s official embedding instructions. WordPress cannot make every external page embeddable.
Do not overload a page with third-party frames
A visually small map or video can still load scripts, fonts, trackers and other resources. Several embeds on one page can therefore have a noticeable performance cost.
- Embed only content that contributes to the page.
- Lazy-load below-the-fold embeds when possible.
- Test mobile layout.
- Review privacy implications for third-party services.
- Prefer a static image or link when an interactive embed is unnecessary.
When WordPress removes iframe markup
WordPress can sanitize HTML according to the user’s permissions and the site’s configuration. If an iframe disappears after saving, first check your account permissions and whether the provider offers a supported WordPress integration.
The practical approach
Use a native block when possible, a Custom HTML block when necessary, and keep the number of third-party frames under control. Good iframe usage is less about copying a code snippet and more about deciding whether the embed is worth its performance and maintenance cost.
Official references: WordPress Custom HTML block and MDN iframe reference.