To embed an iframe in WordPress, paste your <iframe> HTML into a Custom HTML block in the block editor. If your iframe isn’t working, it’s almost always because the source site blocks itself from being embedded (via the X-Frame-Options or Content-Security-Policy header), not a WordPress problem. More on both below.
<iframe
src="https://example.com/embed-page"
width="100%"
height="500"
loading="lazy"
title="Example embed"></iframe>This guide covers embedding an iframe with and without a plugin, making YouTube embeds responsive (with modern CSS, not the old padding hack), and a dedicated troubleshooting section for when iframes won’t load.
What is an iFrame?
An iframe (inline frame) is an HTML element that embeds another web page inside yours. Common uses: YouTube videos, Google Maps, third-party forms, Calendly widgets, and sharing content between your own sites. For most popular services (YouTube, Twitter/X, Vimeo, Spotify), WordPress handles the embed automatically via oEmbed, so you just paste the URL on its own line in the editor and it becomes a proper embed.
You only need an actual <iframe> when:
- The source site doesn’t support oEmbed.
- You want more control over dimensions, lazy-loading, or the sandbox attribute than oEmbed gives you.
- You’re embedding a page on your own domain (a form, a tool, an iframe-based admin view).
Method 1: Embed an iFrame without a plugin (block editor)
The default way in modern WordPress: use the Custom HTML block.
- In the block editor, click the + button to add a new block.
- Search for Custom HTML and select it.
- Paste your iframe code into the block.
- Click Preview (top of the block) to see the rendered result inside the editor.
A basic iframe embed:
<iframe src="https://bing.com" height="400"></iframe>A production-ready iframe (with lazy loading, accessibility title, and 100% width for responsiveness):
<iframe
src="https://example.com/page"
width="100%"
height="500"
loading="lazy"
title="Descriptive title for screen readers"></iframe>If you’re on the classic editor or a page builder, the flow is the same: switch to the Text / HTML / Code tab (or use the builder’s HTML widget) and paste the iframe code there.
Important iframe attributes
src– the URL of the embedded page. Always usehttps://on HTTPS sites (mixed content is blocked by browsers).width/height– pixel values. Usewidth="100%"for fluid embeds.loading="lazy"– tells the browser to defer loading until the iframe is near the viewport. Always add this; it’s a free performance win.title– accessibility requirement; describes the iframe to screen readers.allow="fullscreen"– for video iframes, lets users go fullscreen.sandbox– restricts what the embedded page can do (scripts, forms, same-origin access). Use for untrusted sources.frameborder,scrolling,align– deprecated in HTML5. Style with CSS instead.
Method 2: Use the iFrame plugin (shortcode-based)
If you’d rather not deal with HTML, the iFrame plugin gives you a simple shortcode that outputs an iframe with all the same attributes. It also handles some of the common gotchas (like stripping deprecated attributes) automatically.
After installing, use the shortcode like this:
[iframe src="https://www.youtube.com/embed/fd0k_hbXWcQ" width="100%" height="500"]Drop the shortcode into any post, page, or widget. The plugin converts it into the corresponding iframe HTML at render time.
Note: the plugin doesn’t override the source site’s security headers. If a site blocks itself from being embedded, the plugin can’t bypass that (nothing can). See the troubleshooting section below.
Make YouTube embeds responsive
iframes have a fixed aspect ratio by default, which breaks when the viewport narrows. Modern CSS solves this with the aspect-ratio property, with a padding-based fallback for very old browsers:
.responsive-embed-container {
position: relative;
display: block;
overflow: hidden;
height: 0;
max-width: 100% !important;
}
.embed-responsive-16by9 {
padding-bottom: 56.25%;
aspect-ratio: 16 / 9;
}
.responsive-embed-container iframe,
.responsive-embed-container object,
.responsive-embed-container embed {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}Add this to your theme (via Additional CSS or a child theme’s style.css), then wrap any iframe in the container:
<div class="responsive-embed-container embed-responsive-16by9">
<iframe
src="https://www.youtube.com/embed/fd0k_hbXWcQ"
width="560"
height="315"
loading="lazy"
title="YouTube video"
allow="fullscreen"></iframe>
</div>Want every YouTube embed on your site to be responsive automatically? Drop this into your theme’s functions.php (or a code snippets plugin). It uses the embed_oembed_html filter hook to wrap every oEmbed from YouTube or youtu.be with a responsive container:
add_filter( 'embed_oembed_html', function ( $html, $url, $attr, $post_id ) {
if ( strpos( $html, 'youtube.com' ) !== false || strpos( $html, 'youtu.be' ) !== false ) {
return '<div class="responsive-embed-container embed-responsive-16by9">' . $html . '</div>';
}
return $html;
}, 10, 4 );If you’d rather not touch code, the Simple YouTube Responsive plugin does the same thing.
Why your iframe isn’t working
If you’ve pasted iframe code and it shows a blank space, an error, or the site’s own “refused to connect” message, the iframe itself is almost always fine. The source site is blocking itself from being embedded, or a security setting on your end is stripping the iframe before it renders. Run through these checks in order:
The source site blocks embedding (most common)
Most modern sites send an X-Frame-Options: DENY or X-Frame-Options: SAMEORIGIN header that tells browsers to refuse to render the page inside an iframe. You’ll see an error like “refused to connect” or “has been blocked by CSP” in the browser’s console.
Sites that block iframe embedding by default include Google, Facebook, most banks, most SaaS dashboards, and any site with a serious security policy. Newer sites use Content-Security-Policy: frame-ancestors 'self' instead of X-Frame-Options, which does the same thing.
If you’re running your own site and want to verify that your security headers protect you from being loaded inside someone else’s iframe (a clickjacking prevention), I built ClickJackTest for exactly that. Paste a URL and it tells you whether the X-Frame-Options or CSP headers are set correctly.
There is no client-side workaround. If the source site blocks embedding, you can’t override that from WordPress. The fix is to use an official embed URL if the service provides one (YouTube’s /embed/ URLs, Google Maps’ Share → Embed option, etc.), or switch to oEmbed / an official API.
HTTPS mixed content
If your site is on HTTPS (it should be) and you’re embedding an HTTP (non-secure) page, browsers silently block the iframe. Check the iframe’s src: it needs to start with https://, not http://. If the source only serves HTTP, you can’t embed it on an HTTPS site. Period.
A WordPress security plugin is stripping the iframe
Some security plugins (Wordfence, Solid Security, Sucuri) aggressively sanitize HTML saved through the editor. If you paste an iframe, save, and re-open the post to find the iframe has been stripped or turned into an escaped string, your security plugin is the culprit.
Check the plugin settings for an HTML filtering / whitelist option, or temporarily disable the plugin, re-add the iframe, and re-enable it. You can also whitelist specific iframe source domains in most of these plugins.
Your user role is stripping iframes on save
In WordPress multisite, Editor, Author, and lower roles cannot save <iframe> markup by default; core strips it on save. Only Super Admins can post unfiltered HTML in multisite. On single-site installs, Administrators have unfiltered_html by default, so this isn’t usually an issue. But if you’re on multisite as an Editor and your iframe vanishes on save, the fix is either posting as Super Admin, enabling ALLOW_UNFILTERED_UPLOADS and related constants, or using the iFrame plugin’s shortcode instead (the shortcode isn’t stripped).
The classic TinyMCE editor reformats the iframe
Switching between the Visual and Text tabs in the classic editor can mangle iframe HTML. Stay in the Text tab when working with iframes, or use the Custom HTML block in the modern editor (which doesn’t have this problem).
Frequently asked questions
How do I embed an iframe in WordPress?
Add a Custom HTML block to your post or page in the block editor, then paste your <iframe> code into it. On the classic editor, switch to the Text tab and paste there. For a code-free option, install the iFrame plugin and use its shortcode.
Why isn’t my iframe working in WordPress?
Almost always because the source site blocks itself from being embedded via an X-Frame-Options or Content-Security-Policy header. Open the browser console on the page with the iframe; if you see “refused to connect” or “blocked by CSP,” that’s the cause, and there’s no client-side fix. Other possibilities: mixed HTTPS/HTTP content, a security plugin stripping iframes, or an Editor-role user on multisite.
Why does my iframe disappear when I save the post?
Either a security plugin is stripping it, or your user role doesn’t have the unfiltered_html capability (common on multisite for Editor and Author roles). Check your security plugin’s HTML filtering settings first. If that isn’t it, try posting as an Administrator on single-site or Super Admin on multisite, or use the iFrame plugin’s shortcode, which isn’t filtered.
What is the best iframe plugin for WordPress?
The iFrame plugin from Webvitaly is the standard choice: it’s lightweight, gives you a simple shortcode, and handles deprecated attributes automatically. For YouTube-specific responsive embeds, Simple YouTube Responsive is worth pairing with it.
Can I embed any website in a WordPress iframe?
No. Most large sites (Google, Facebook, banks, SaaS tools) block iframe embedding via security headers. You can only iframe-embed sites that explicitly allow it, typically by offering an “embed” URL or widget (YouTube, Vimeo, Calendly, Google Maps, etc.). For any site that doesn’t offer an embed URL, iframes will be blocked and there’s no workaround.
How do I make an iframe responsive in WordPress?
Wrap the iframe in a container div with aspect-ratio: 16 / 9 (or whatever ratio you need) and set the iframe to fill that container with width: 100%; height: 100%. See the “Make YouTube embeds responsive” section above for the complete CSS. For automatic responsive YouTube embeds site-wide, use the embed_oembed_html filter snippet shown above.
Is it safe to embed iframes from other sites?
Embedding iframes from trusted sources (YouTube, Google Maps, Calendly) is fine. Embedding from unknown sources can expose your visitors to clickjacking or malicious scripts. Use the sandbox attribute to restrict what the embedded page can do, and only embed from sources you trust.
Bottom line
For most iframe embeds: paste your <iframe> HTML into a Custom HTML block, add loading="lazy" and a title attribute for accessibility, and wrap it in a responsive container if it’s a video. If the iframe refuses to load, it’s almost certainly the source site blocking embedding via security headers, not anything you’ve done wrong in WordPress. In that case, switch to the official embed URL the service provides (if any) or find an alternative.
Related: adding custom CSS to WordPress, useful WordPress code snippets, or browse the full library of WordPress tutorials on the SmartWP blog.
46 Responses
If you have any questions let us know in the comments!
I just want to say your cute Andy. And those codes here have been very helpful!
Great video! Very helpful in helping me get a Tableau map installed on a site I’m developing. Any advice for adding a border or close button? I’m interested in integrating with a Elementors’ native ‘popup’ functionality but haven’t quite determined how to best accomplish what you have here.
Not too familiar with Tableau, but you could use Elementor’s raw html block and use the embed code from Tableau.
Or try using this plugin https://wordpress.org/plugins/simple-tableau-viz/ and use the elementor shortcode block to embed the map via the shortcode.
Hope this helps!
HI, I am trying to embed things )not always videos into a masterstudy lesson. CAn you show how this is done please?
If you’re trying to just embed a website it should automatically create an oEmbed card for the site if you just paste the url into your editor. If you want to embed something like a PDF specifically you can use a plugin like this https://wordpress.org/plugins/pdf-embedder/
Thank you for the tip, how do i make sure the iframe does not get longer than the page so i get double scroolbars?
Andy, I have been requested to add a custom widget to a third party portal on our website. I have been attempting this but have been unsuccessful. Any tips for how to apply this? We use BeaverBuilder for front end content.
What is the issue happening? if your site is https and the site you are putting in an iframe is http it will not load. Additionally in WordPress you can use the text widget and select html to use html to embed it. Also if you are trying to do it in beaverbuilder there should be a raw html block you can use to embed an iframe.
If it’s not working most likely it’s security related. If it’s a WordPress Multisite setup you have to have unfiltered html enabled for it to work.
The easiest solution is probably to just use the plugin noted above.
Hi,
Now not work plugin OPEN FRAME in browsers, and not work function Open frame in new tab, and cannot be read iframe on webpage. Is there a solution?
Hi Andy,
I have followed your video, very helpful and “simple”.
The reason for watching is: I have a Google Sheets published Diagram (chart) (as image) and I would like to embed this in my website.
I can’t get the chart responsive. Do I have to do an extra trick for an image?
Hereby a link to my “wanted: responsive page.
https://www.sunpage.nl/he/voorlichting/laat-zien-hoe-groen-heiloo-is/
Thank you in advance
Ron
Hey Ron! Since it’s just an image have you tried doing just an image HTML tag?
<img src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQpMUgFOt5C3S3sLEFLYzQO5ekyZttTvlpKy7SYVFRpI4o0_IbgA5iB9qPO89is1Vlf8g6q1glf0NMf/pubchart?oid=570910300&format=image">Just tested this and the image will scale properly on your site using this method.
Andy,
Thank you for the fast reply, a do appreciate ty this much
Wow, how simple is that 🙂 .
Sometimes one turnes into a wrong way .
Many Thanks
Ron
Thank you Andy for the video , I'm just wondering if i can embed a part of a page on my website, not the whole page ( a forum for example into my page )
Is this possible?
Hey Rendal, you can set an offset in the iframe it seems and that should give you the result you want. This answer on stackoverflow may help https://stackoverflow.com/posts/16536139/revisions
hey, Andy, can u do this for google drive embedded video, also I want to disable the top right corner pop-out button
Thank YOU Andy,
Your post is short, to the point, and FILLED with the info I needed (no hunting through loads of content… pheeew!) as well as a video for the visual learners, like me 🙂 .
Thanks again,
Trish
Hey Andy, I have a bunch of videos on my website already. All embedded by just copy-pasting the embed code from YouTube. Your process requires me to put the div class around every video to work. That would unfortunately take a lot of time. Is there any way to make all the videos I already have become responsive without using any plugin?
Thanks.
Hey Aalok, yes! I’ll update the article tonight with the automated way to wrap your videos.
I will be waiting for it. Thank you so much, I really do appreciate it.
Let me know if what I just added at the end helps, I changed some of the class names as well but I think it’ll make sense to you 🙂
It didn’t work. It says “Unable to communicate back with site to check for fatal errors, so the PHP change was reverted. You will need to upload your PHP file change by some other means, such as by using SFTP.”
What do I do now?
Hmmm how are you adding the PHP snippet? just curious… if it’s in your functions.php remember not to include the additional
Here is how my functions.php looks:
start();
I tried pasting the code at the end.
Can you also embed powerpoint show files? I have powerpoint games that I want to embed on my website. Some buttons on the powerpoint dont work with some plugins.
I’m not too familiar with embedding a powerpoint, it may be a limitation of the web browser making the game not work. If you are looking to distribute games via the browser I’d recommend using Javascript and HTML.
If having problems, exhange the . points with an $ symbol.
This is so helpful! Any chance you have a full list of why a site might not be “embeddable”? For example, it seems like if a site has iframes, it can’t be embedded in an iframe?
Hey Kara, many sites do it for security reasons, you can use a site like this: https://gf.dev/x-frame-options-test to scan if a site blocks iframes with the x-frame-options attribute. Hope that helps!
Hi Andy, great article! Any chance you can provide some guidance on how to fix the scroll within a scroll in a window? It makes very difficult, especially on mobile devices. Not sure if it’s a responsiveness issue or something else? Here is a page as an example: https://www.moderndiamondco.com/jewelry/
Thanks!
Hey Andy.
Thank you so much for your article.. it helped so much..
quenstion.. it you have the time..
is it posible to ad a link so when you click the iframe you go to the ad website?
if posible how would you code it?
thank you again!
kind regards Marlene.
Hi
Can i embed facebook reviews using this method
I tried this responsive code on my wordpress and nothing really happened. Only using width=100% makes the video embeds look at all decent. I have also tried similar codes from others and none of them worked also. Embedding videos without iframe would look the best but I can’t get any video views to count on youtube with those, so I probably have to stick with unresponsive embeds?
Hi I’m trying to iframe my teespring website in my wordpress. I have it where it shows up in preview but won’t show up on the actual public site after I update. Cn you please help? here is the code I’m using to embed (iframe) my Teespring website into Wordpress.
HI ANDY
the height in my video is non “responsive”
the width changes when i resize screen but height doesn’t change so content isgetting cropped
I tried all of this with an interactive video but still does not have the correct ratio. The video opens too big and I can’t rezise it.
Thank you for your blog post.
I am facing a similar issue on my website for embedding geogebra applet using iframe. I tried your suggested method, but unfortunately it did’t work.
Here is my embedding code
It always leaves a white space in the right side of applet for desktop and in the bottom for mobile version. https://physicsentrance.com/jacobian/
I am using elementor page builder in wordpress.
Thank you.
Please help me to solve this issue.
This is a very important article related to iFrame, Thanks.
hey, Andy, can u do this for google drive embedded video, also I want to disable the top right corner pop-out button
I’m not sure if Google Drive videos will embed, that being said you likely can’t modify what’s inside an iframe. Google Drive might have a built in oEmbed though that might be a better solution than an iframe.
Can i embed DOC File From one Drive
I’d recommend doing this to embed oneDrive files: https://support.microsoft.com/en-us/office/embed-files-directly-into-your-website-or-blog-ed07dd52-8bdb-431d-96a5-cbe8a80b7418
I will be waiting for it. Thank you so much, I really do appreciate it.
Awesome Dude!!! Keep it up
What an awesome post