What Is an Iframe? [+ How to Embed Content With Iframes]

Embedded content is common on websites. Part of what makes the web so powerful is our ability to pull content from multiple servers to build a coherent website experience.

Take videos, for instance. How often do you see embedded YouTube videos on websites you visit? I’d guess pretty frequently. And if not, here you go:

Embedded videos can add a lot of value to your pages. They help engage, inform, and delight your visitors, as long as they appear seamless with your other content. Also, YouTube is a video hosting solution. You don’t need to store these large files on your own servers — simply upload them to your business YouTube channel.

If you want to embed YouTube videos — or any type of embeddable content — in your own website's HTML, one option is to utilize the iframe element.

No, iframe is not an Apple product for holding your pictures. It’s an important page element that allows for much of the cross-site compatibility we see online today. Here’s what you need to know:

This is a powerful capability in HTML — you can take any content from any website (with permission) and place it on your own site to enhance your content. 

How to Make an Iframe

To use an iframe, we use the <iframe> HTML tag. This tag requires a src (source) attribute, which specifies the URL of the HTML file to be embedded on the parent page. In its most basic form, an iframe looks like this in HTML:

A simple piece of functional iframe HTML code looks like this:

This code will embed a web page onto its parent page:

This embedded page exists separately from the parent page in terms of its HTML, CSS, and JavaScript code. You can view that example page here.

You’ll also notice that this code snippet contains some extra attributes, width and height. These set the dimensions of the iframe region that displays the embedded file. width and height may be set as pixel values, or as percentages of the window, which scales the iframe proportionally to the size of the viewing window.

Like other HTML elements, iframes can be customized with other attributes. Here’s an overview of common iframe attributes:

Iframe vs. Embed

Before we continue, you might have heard of another similar HTML5 element called embed. Like iframe, the embed element is used to embed an external resource in a web page. However, these two elements do slightly different things.

As mentioned, we use iframe to embed an HTML document onto a page. Alternatively, embed is used to embed other types of content, including PDFs, browser plugins, and Flash animations. The embed element can also be used to place media, but iframe is better for this purpose.

Because embed is really only useful for embedding outdated web technologies, you likely won’t need it — iframe is much more common and will almost always do the job. Next, let’s see what this element is capable of.

How are iframes Used?

Websites often use iframes to embed media from external websites. For example, here’s the embed code for a HubSpot YouTube video embedded at the top of this post:

Embedded maps are another common use of iframes. Google Maps allows you to copy embed code from any map location and display it on your website:

The map above is the result of this iframe code:

Also, display advertisements are often created with iframes. While images and gifs are static elements, a fully embedded HTML document allows for scripting. With this method, ads can be made interactive, as well as track impressions and clicks.

How to Make an Iframe Responsive

So far, we’ve seen how to implement iframes on desktop websites. But what about mobile pages? With more users viewing websites and videos through smartphones and tablets, it’s important to understand how iframes can adapt to smaller screens.

Luckily, making mobile-friendly iframes requires just a bit of CSS knowledge to pull off. Let’s take our YouTube video example again:

For your own implementation, replace the YouTube URL within the quotes with your own YouTube embed URL.

Next, we’ll remove the width and height attributes from the HTML. When these are set, the iframe will always match these dimensions, regardless of device. We don’t want that.

Now, we’ll enclose our iframe in a container div. This container will resize based on screen width:

Lastly, apply the following CSS to the above HTML:

Let’s quickly unpack this styling:

The .container section applies to the <div> that holds the iframe. The padding-top property value of 56.25% is important for embedding YouTube videos specifically — it ensures the entire video is visible, no matter the width of the container. This value is calculated from the standard YouTube aspect ratio of 16:9 (i.e., 9 / 16 = .5625). For videos with different aspect ratios, the value of padding-top should be calculated the same way.

The .container iframe styling applies to the iframe itself. It sets the iframe to take up the entire space of its parent container.

When this CSS is applied, you’ll see the video conforms to the screen width:

Using Iframes: Some Words of Caution

Iframes can be very useful, but you should be aware of their drawbacks.

First, make absolutely sure that the site or content you embed is trustworthy and secure. If attackers successfully inject harmful code into a web page that you embed, it could harm your website too.

Second, iframes can affect page performance if the embedded content takes too long to retrieve from its host. Avoid placing too many iframes on a single page (unless you’re writing an informative blog post about them), and consider taking advantage of the loading attribute:

“lazy” sets the iframe to load only after it enters the visitor’s view, which works to decrease the time of initial page load.

Finally, consider the effect of iframes on your pages’ SEO. Google recommends avoiding iframes and other rich media content on your website, as this content is harder to index than plain HTML content. If you still want to use an iframe, provide text-based links to any content linked in your iframe if you can so search engine crawlers can recognize them.

Iframe is one of the oldest HTML elements, and its resilience and usefulness tell us it’s here to stay for a while. For embedding content, this element is a must for your HTML tool belt.

Editor's note: This post was originally published in October 2020 and has been updated for comprehensiveness.