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

Take videos, for instance. How ofttimes do y'all see embedded YouTube videos on websites yous visit? I'd guess pretty oft. And if non, here you go:

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

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

Download Now: Free Intro Guide to HTML & CSS

No, iframe is not an Apple product for holding your pictures. It's an important folio chemical element that allows for much of the cantankerous-site compatibility we run into online today. Here's what you demand to know:

What is an iframe?

An iframe, brusk for inline frame, is an HTML element that contains another HTML document within information technology. The iframe element is specified with the iframe tag. It may be placed anywhere in an HTML document, and thus anywhere on a web page. Iframes are most oftentimes used to embed specific content from one web page — similar a video, form, document, or even a full web folio — within a different web folio.

This is a powerful capability in HTML — yous can have any content from whatsoever website (with permission) and identify it on your ain site to enhance your content.

How to Make an Iframe

To use an iframe, we employ 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:

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

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

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

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

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

You lot'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 prepare as pixel values, or as percentages of the window, which scales the iframe proportionally to the size of the viewing window.

Similar other HTML elements, iframes tin can exist customized with other attributes. Here's an overview of common iframe attributes:

attribute purpose
permit indicates what features the iframe is immune to utilise (e.chiliad. fullscreen, photographic camera, autoplay)
allowfullscreen grants or denies permission for the iframe to appear in full-screen mode
meridian sets the meridian of the iframe (if not specified, the default meridian is 150 pixels)
loading sets lazy loading or eager loading for the iframe
referrerpolicy sets what referrer information should be sent in the request for the iframe
src the address of the resource included in the iframe
width sets the width of the iframe (if not specified, the default width is 300 pixels)

Iframe vs. Embed

Before nosotros continue, you might accept heard of another similar HTML5 element chosen embed. Similar iframe, the embed element is used to embed an external resources in a web folio. However, these two elements do slightly unlike things.

Every bit 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 chemical element tin can also be used to place media, only iframe is better for this purpose.

Because embed is really but useful for embedding outdated web technologies, you probable won't need it — iframe is much more mutual and will almost always do the chore. Next, let's encounter what this element is capable of.

How are iframes Used?

Websites oftentimes employ iframes to embed media from external websites. For example, hither'due south the embed code for a HubSpot YouTube video embedded at the top of this postal service:

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

Embedded maps are another mutual use of iframes. Google Maps allows yous to re-create embed lawmaking from whatever map location and display information technology on your website:

The map above is the effect 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.ane!3m3!1m2!1s0x89e370bc261e50e5%3A0xf3cba8437d505a26!2sHubSpot!5e0!3m2!1sen!2sus!4v1602001548652!5m2!1sen!2sus" width="600" height="450" frameborder="0" mode="border:0;" allowfullscreen="" aria-hidden="imitation" 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 rails impressions and clicks.

How to Make an Iframe Responsive

So far, we've seen how to implement iframes on desktop websites. Only what nearly mobile pages? With more users viewing websites and videos through smartphones and tablets, it'southward important to sympathise how iframes can adjust to smaller screens.

Luckily, making mobile-friendly iframes requires simply a scrap of CSS knowledge to pull off. Let'south have our YouTube video example again:

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

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

Next, nosotros'll remove the width and meridian attributes from the HTML. When these are set, the iframe will ever lucifer these dimensions, regardless of device. We don't want that.

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

At present, 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;
   summit: 0;
   left: 0;
   width: 100%;
   pinnacle: 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 — information technology ensures the entire video is visible, no matter the width of the container. This value is calculated from the standard YouTube attribute ratio of 16:9 (i.e., 9 / xvi = .5625). For videos with unlike attribute ratios, the value of padding-peak should be calculated the same fashion.

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

When this CSS is applied, y'all'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 tin be very useful, but you should be aware of their drawbacks.

Showtime, make absolutely sure that the site or content you embed is trustworthy and secure. If attackers successfully inject harmful code into a web folio that y'all embed, it could impairment your website too.

Second, iframes can affect page performance if the embedded content takes too long to retrieve from its host. Avert placing also many iframes on a single page (unless you're writing an informative weblog post about them), and consider taking advantage of the loading 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 fugitive iframes and other rich media content on your website, as this content is harder to alphabetize than plain HTML content. If yous still desire to utilise an iframe, provide text-based links to any content linked in your iframe if you tin can so search engine crawlers tin recognize them.

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

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

New Call-to-action

css introduction

Originally published Apr 20, 2021 7:00:00 AM, updated Jan 26 2022