Embedded content is quite common on websites. Part of what makes the web so powerful and useful is our ability to share content from other sources (legally, of course).

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

Embedded videos can add a lot of value to your pages. For one, YouTube provides 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. Also, videos help engage, inform, and delight your visitors, as long as they appear seamless with your other content.

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

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:

Free Intro Guide to HTML & CSS [Download Now]

In other words, an iframe is like a web page...within a web page (cue the Inception sound effect).

How to Make an Iframe

To place 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, and iframe looks like this in HTML:

 
<iframe src="URL"></iframe>

And a simple piece of functional iframe HTML code looks like this:

 
<iframe src="https://www.hubspot.com/" width="1500px" height="500px"></iframe>

This code will embed the HubSpot homepage onto its parent page:

 

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 toggled with many different attributes, including ones that control full-screen mode and lazy loading. For a more thorough summary, see Mozilla’s full list of iframe attributes.

How Are Iframes Used?

Websites 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:

 
<iframe width="560" height="315" src="https://www.youtube.com/embed/S93nYy-Bxzo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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:

 
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1718.6454008049905!2d-71.07787073663287!3d42.36955552931532!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e370bc261e50e5%3A0xf3cba8437d505a26!2sHubSpot!5e0!3m2!1sen!2sus!4v1602001548652!5m2!1sen!2sus" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

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:

 
<iframe width="560" height="315" src="https://www.youtube.com/embed/S93nYy-Bxzo"></iframe>

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.

 
<iframe src="https://www.youtube.com/embed/S93nYy-Bxzo"></iframe>

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

 
<div class=”container>
<iframe src="https://www.youtube.com/embed/S93nYy-Bxzo"></iframe>
</div>

Lastly, apply the following CSS to the above HTML:

 
.container {
position: relative;
overflow: hidden;
padding-top: 56.25%;
}

.container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}

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:

an embedded youtube video, which adjust to the changing width of the browsing window

Using Iframes: Some Words of Caution

Iframes can be very useful, but you should be aware of its 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 load attribute:

 
<iframe src="URL" loading="lazy"></iframe>

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

New Call-to-action

 css introduction

Originally published Oct 12, 2020 7:00:00 AM, updated October 12 2020

Topics:

HTML