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:
What is an iframe?
An iframe, short for inline frame, is an HTML element that contains another HTML document within it. 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 commonly used to embed specific content from one web page — like a video, form, document, or full web page — within a different web page.
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:
And a simple piece of functional iframe HTML code looks like this:
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.
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.
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 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:
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.
Originally published Oct 12, 2020 7:00:00 AM, updated October 12 2020