How to embed an iframe in WordPress

Steps

1. 1

   Step 1: Check that you can save iframe code

   On self-hosted WordPress, your role needs the unfiltered_html capability. On WordPress.com, the site needs a paid plan with hosting features active.

2. 2

   Step 2: Type /html and press Enter

   Do this in a new paragraph block. You can also click the Block Inserter and choose Custom HTML.

3. 3

   Step 3: Click Edit HTML and paste the iframe code

   The editor shows a preview of the code to the right of the code editor.

4. 4

   Step 4: Click Update, then save the post

   Open the published page and make sure the frame shows.

5. 5

   Step 5: For a supported service, use the Embed block

   Type /embed, paste the link, and click Embed. On WordPress.com, the Embed block works on every plan.

Limits

• On a single site, only Administrators and Editors have the unfiltered_html capability that iframe code needs.

• On Multisite, only Super Admins have unfiltered_html, so site Administrators cannot save iframe code.

• For a user without unfiltered_html, WordPress removes the iframe when the post is saved or updated.

• On WordPress.com, iframe is a restricted tag: it needs a paid plan, and you must install at least one plugin to activate hosting features.

• The Embed block takes a link from a supported service, not iframe code.

Troubleshooting

The iframe is gone after you save

Your role does not have unfiltered_html, or the WordPress.com site has no active hosting features. Ask an Administrator to add the code, or check your WordPress.com plan.

Blank iframe, no error →

"Refused to connect" in the frame

The framed site sends X-Frame-Options or a CSP frame-ancestors rule. Only the owner of that site can change it.

"Refused to connect": cause and fix →

The frame is too wide on phones

The code sets a fixed width in pixels. Set the width to 100% and use an aspect ratio for the height.

Responsive iframes →

Related