How to Embed an iFrame in WordPress

There are many uses on the web for embedding iFrames into your website. This could include videos, images, or even other websites. You can even use iframes on your site to save storage space on your site by embedding content from another server.

Here we’ll show you how to embed an iframe in WordPress with and without a plugin. Additionally how to make YouTube embeds responsive.

What is an iFrame?

iFrames have been part of the html since its creation. iFrames allow websites to embed content from other websites.

Many sites have new security policies that do not allow them to appear in iFrames in favor of oEmbeds which are natively supported by WordPress. But for sites that do not offer oEmbed support an iFrame can come in handy.

How to embed iFrame in WordPress Without Plugin

The most basic way to add an iFrame in WordPress is to use HTML. This can be done in the “Text” tab of the classic editor.

Here is example html to put into an iFrame.

<iframe src=""></iframe>
view raw iframe-example.html hosted with ❤ by GitHub

iFrame attributes

  • Src – The source of the iFrame, this is a URL. If your site has SSL you need to ensure all iFrames start with https://.
  • Width/Height – Width and height are pixel values defining the size of your iFrame.
  • Frameborder – Setting frameborder=”1″ will show a small border around the edges of the iFrame. frameborder=”0″ will hide the edges of the iFrame making it flush with your page (good video videos).
  • Scrolling – Whether or not you want scrollbars in your iFrame, values include “yes”, “no”, or “auto”.
  • Align – Set the default alignment of the iFrame, values include “left” “right” “top” “middle” “bottom”.

This is not the optimal solution since a lot of hosts will block iframes due to security concerns. That is why it is optimal to use our next method of a WordPress plugin.

If you’re embedding an iframe with a page builder like Elementor you typically can just use their “html” block with the iframe code above.

WordPress iFrame Embed Plugin

The best way to embed a WordPress iFrame is to use a plugin. The iFrame plugin on the repository will give you the best results. This plugin offers the same features as embedding an iFrame but is generated via a simple to use shortcode.

Below is an example of how to use the shortcode for the iFrame plugin.

[iframe src="" width="100%" height="500"]

If you are new to shortcodes all you have to do is add it into your editor after the plugins installed.

Make YouTube Embeds Responsive in WordPress

If you’re including a YouTube video in your page you may notice the aspect ratio isn’t correct when resizing the page for responsive web design. This is because iFrames have a fixed height, you can make your embeds responsive by using the CSS below.

.responsive-embed-container {
max-width: 100% !important;
.responsive-embed-container iframe, .responsive-embed-container object, .responsive-embed-container embed {

After adding this CSS to your site you can wrap any video with a div like this <div class=”responsive-embed-container”> which will give it the appropriate class to become responsive. You can see a full example of how an embed would work using this CSS below.

<div class="responsive-embed-container"><iframe width="560" height="315" frameborder="0" allowfullscreen src=""></iframe></div>

You can also use a plugin like Simple YouTube responsive if you’re not familiar with CSS or HTML.

We hope these tips help you embed WordPress iframes and allow you to share content across domains.

It’s important to note that if you’re sharing content from popular sites like YouTube or Twitter you can just paste the URL in your WordPress editor. This will use an oEmbed to automatically embed the content.

Andy Feliciotti

Andy Feliciotti

Andy has been a full time WordPress developer for over 10 years. Through his years of experience has built 100s of sites and learned plenty of tricks along the way.

5 Responses

  1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

WordPress Tips Monthly

Get the latest from SmartWP to your inbox.