Ever heard of iframes? If not, you’ve almost certainly interacted with them. If you’ve seen an embedded YouTube video, Google Map, or Facebook post, we’re here to inform you that the iframe element was behind it.
Iframes have been around for a while helping us embed content into websites, including WordPress websites. If you’re looking to include media content in your WordPress pages, you should be familiar with iframes and how you can use WordPress plugins with them.
In this guide, we’ll review what iframes are, how you can use them, and the different ways to add them to WordPress. These methods include manually pasting and using plugins — to make your life easier, we’ll list some of our favorite iframe plugins too.
What is an iframe in WordPress?
An iframe, short for inline frame, is an HTML element that contains another HTML document inside it. Iframes are for embedding external content into web pages, including WordPress pages and posts. In other words, iframes display content from other web pages without having to host this content.
In HTML, iframes are created with the iframe tag. Iframes are most commonly used for embedding files that might be too large and impractical to host on the website’s server — this includes videos, long-form audio content, and interactive media.
For example, a website can choose to host its videos on a platform like YouTube, then embed these videos into its pages with iframes. By choosing to store videos externally, the website saves heaps of server space and keeps its load times down.
You can also use iframes to embed content that belongs to other websites. For example, Facebook lets authors generate iframe code to embed posts on their websites.
The iframe above uses the following code:
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fhubspot%2Fposts%2F10159451400784394&show_text=true&width=500" width="500" height="186" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
Iframes are one good way to enhance your web pages, since embedded media can result in more time spent on your webpage and a more engaged audience.
If you own a WordPress site, you can add iframes with one of a few methods. First, we’ll cover how to insert iframes with a plugin and review the best plugins available to help you. Then, we’ll cover a couple of ways to place iframe content on your site without a plugin.
How to Embed an Iframe in WordPress With a Plugin
Iframes are HTML elements, so they need to be added in the HTML document to appear on a web page. However, you might not be comfortable editing your site’s HTML or working with HTML in general.
That’s no problem, since you can use WordPress plugins to place iframes with minimal or no coding. WordPress iframe plugins can help site owners easily place iframes on pages, and some also let you change your iframe display options. Let’s take a look at your best iframe plugin options below.
Best Iframe WordPress Plugins
- Advanced iFrame
- Simple Iframe
- iframe popup
- Lazy Load
1. Advanced iFrame
Advanced iFrame is a popular WordPress plugin that lets you place iframes with shortcode, rather than pasting embed code into the body of your posts. This enables you to insert embedded content almost anywhere on your page.
The free version of Advanced iFrame also allows some limited customization to iframes, including hiding areas of the page to give your iframe more space, modifying parameters of the iframe including dimensions and lazy loading, adding security codes, and applying CSS and JavaScript to the iframe.
With the free version, the iframe will display a link to the plugin page after 10,000 monthly views. You can prevent this by purchasing Advanced iFrame Pro ($21), which also comes with premium features like hiding specific areas of the iframe, support for widgets, responsive iframes, and more.
2. Simple Iframe
Simple Iframe is a straightforward and free plugin for adding iframes with the Gutenberg editor. After installing and activating the plugin, you’ll get a new “Iframe” block for embedded content. Just paste the URL of the page you wish to embed, and Simple Iframe handles the code for you. You can then preview the iframe while still inside the block editor.
3. iframe popup
This is another free plugin for incorporating iframe embeds into WordPress websites. Iframe popup uses a lightweight JQuery extension to display iframes inside popup windows. It’s ideal for showing full web pages in a modal with minimal work on your end. The popup is responsive, and some aspects can be customized via the plugin settings.
4. Lazy Load
The Lazy Load plugin from WP Rocket is a codeless way to enable lazy loading on your WordPress site’s images and iframes. Lazy loading defers the loading of certain media items until the user scrolls down to them, giving the impression of a faster initial page load.
Along with images, Lazy Load will add the lazy loading HTML attribute to your page’s iframes to improve performance and user experience. Plus, the script is lightweight and won’t affect page speed. (That would defeat the whole point!)
Lastly, this plugin allows you to replace iframes for YouTube videos with a preview thumbnail. This is useful if your site embeds many videos — it keeps load times down without significantly impacting user experience.
How to Embed an Iframe in WordPress Without a Plugin
If you’re comfortable with HTML, you don’t need a plugin to place iframes in WordPress. The process is straightforward, and some websites will even produce the embed code for you.
Embed an Iframe in WordPress With Embed Code
If you want to embed content from a popular website like YouTube, Facebook, or Google Maps, there’s a good chance it can generate embed code. So, you just need to copy this code and paste it into your site through the WordPress interface.
As a common example, here’s how to embed a YouTube video with this method:
1. Go to the page for the YouTube video you want to embed.
2. Under the video, click Share.
3. Choose the Embed option from the popup.
4. Select your embed options, then click Copy to copy the embed code to your clipboard.
5. How you add your iframe to a page or post in WordPress depends on your editor. If you use the block editor, add a Custom HTML block, then paste your copied iframe code into the block’s text area.
If you use the classic editor, switch to text editing mode and paste in your embed code.
6. Preview your post to see your embedded video in all its glory.
Embed an Iframe in WordPress Manually
You can also create an HTML iframe yourself and put it in a WordPress page or post. Here’s how:
1. In your WordPress page/post editor, open the Custom HTML option. In the block editor, do this by adding a Custom HTML block. In the classic editor, click the Text tab in the top right corner of the content area.
2. Paste the following tag into the text area:
<iframe src=“URL”></iframe>
3. Replace the text URL with the URL of the page or content that you want to embed.
4. If desired, customize your iframe with additional attributes. The most common attributes are:
- allow: specifies what features the iframe may use (fullscreen, camera, autoplay, etc.)
- height: sets the height of the iframe (if not specified, defaults to 150 pixels)
- loading: sets lazy loading for the iframe
- referrerpolicy: sets what referrer information should be sent in the request for the iframe
- width: sets the width of the iframe (defaults to 300 pixels)
An iframe tag with added attributes might look like this:
<iframe src= “URL” width=“500” height=“300” allow=“fullscreen autoplay” loading=“lazy”></iframe>
5. Preview your page/post to see how the iframe looks with the surrounding content.
Limitations of Iframes
While iframes can be beneficial to WordPress sites, it’s worth reviewing some of their drawbacks and what you should watch out for when using them.
Most importantly, remember that the stuff inside iframes doesn’t belong to your website — you’re taking content from another URL and displaying it on your page. Make sure the content in your iframe is from a trustworthy source. Otherwise, the iframe could be harnessed to inject malicious code into your website.
Next, it’s best not to go overboard with iframe content because of its negative impact on SEO. If the iframe is resource-intensive, it can hurt your load times. Plus, iframes are harder to index by search engines, and Google advises against frequently using them. To remedy these issues, first consider whether an iframe is necessary at all. If it is, add the loading attribute to improve performance. Finally, for each iframe, we recommend providing a separate link in the body text to the iframe content so search engines can better index your page.
Finally, know that not all websites let you embed their content with iframes. Also, you can’t embed content from an HTTP (unencrypted) domain if your website uses HTTPS, and vice versa. Since you should always use SSL encryption, it’s a good idea to stay away from unencrypted HTTP domains anyway.
Iframes: Here to Stay
Despite its limitations, iframes are a resilient feature of HTML, still widely used among WordPress websites to embed media content that can't or shouldn’t be hosted on the website’s own servers.
With the options available for embeds, WordPress admins of all experience levels can leverage iframe embeds to improve their content and keep visitors from bouncing. All it takes is some HTML know-how or a simple plugin to do the trick.
