Thanks to Scott Isaacs, the software architect who developed Dynamic HTML, we can embed audio and video media directly into our web pages using the iframe or inline frame. This HTML tag element contains another HTML document inside of itself. Joseph Labreque, instructor of the Linked Learning course: Learning Web Audio and Video, says iframe elements can be used “to embed externally hosted media content directly within our HTML from any service that supplies and allows cross-domain embedded codes”, in other words, an iframe is a webpage inside a webpage.
Over time the iframe has gained a controversial reputation due to its security risk and drag on browsers. Despite its “laggy” and risky reputation, the iframe has survived the last 24 years of web development. It’s approachable for anyone who wants to liven up their content with an audio or video on their website. In this post, I will share how you can use an iframe securely and prevent causing damage or harm to your website. The iframe is not as menacing as it is made out to be when it is used consciously and sparingly, and iframe can enrich your site with interesting audio and visual media content.
Keep it secure
Iframes are used to embed one HTML document within another, for example, you can embed your favorite Youtube video on your webpage or display a button for others to share your content on a social media platform. Nada Rifki author of “The ultimate guide to iframes” (Jan. 2020) on LogRocket’s blog, states one thing to keep in mind when using an iframe “is that it lets you embed an independent HTML document with its browsing context” which “will be isolated from the JavaScript and CSS of the parent”. She also states, “This is one of the valid purposes to use an iframe: to provide a measure of separation between your application and the iframe content”. This function can be utilized to display a list of created email templates for a user to preview. Rifki suggests using an iframe with the SRCdoc attribute was the cleanest solution to preventing the CSS of the current browsers from affecting the style of the displayed email templates.
<iframe srcdoc=”html><body>
Jamie Juviler offered some “words of caution” in her blog post What is an iframe? “An explanation in 1000 words or less” on the HubSpot blog from October 2020, saying the iframe is susceptible to harmful code that was injected by attackers into a page that can harm your website. Being conscious about the site and content you embed to your page can prevent this calamity when you are using trustworthy and secure sources. The risk of using an iframe is because you are using content from a third party and don’t have control over that content. Rifki suggests one way to avoid increased risk from third-party content in an iframe is to use a Sandbox and Allow attributes which can be used to define privileges allowed to each iframe. She gives a complete list of sandboxing flags along with their purpose. Allow functions to enable you to whitelist specific features like permitting access to the camera or battery information. She also says the allow attribute “is currently experimental and only supported by Chromium-based browsers”. You can find her summary of the most popular allow flags in her blog post.
More is more
An important consideration when using iframes voiced by both Rifki and Juvlier is how many iFrames are used on one page. Overuse can be harmful to your page by affecting the performance, you want to avoid the dreaded drag and long loading dilemma caused when content is retrieved too slow from its host. It’s best to not have too many on a single page. They mention utilizing the load lazy technique to avoid iframes from slowing down your page. You can do this using the loading=” lazy” attribute to have the iframe load only after the user scrolls near it.
<iframe src="URL" loading="lazy"></iframe>
Pro tip: You can also use this attribute with the image tag.
Here’s how you make an iframe
Now that you know the risk of using an iframe you can consciously embed content with minimal risk of damage.
- Use the <iframe> HTML tag with a src (source) attribute to specify the URL of the HTML file that will be embedded on the parent page (your page).
<iframe src=”URL”></iframe>
- Create a borderless iframe that fits blends smoothly with your page using the seamless attribute to remove the borders and scrollbars from the iframe.
<iframe seamless src=”URL”></iframe>
- You can make your iframe mobile-friendly by making it responsive by first removing the width and height attributes and then enclosing your iframe in a container div and applying the CSS in figure (#) to the HTML.
Juviler explains how .container iframe to hold the iFrame, she uses a YouTube video as an example to calculate the value of padding-top by dividing the aspect ratio of the video (16:9 or 9/16 = .5625), you can use this formula to calculate videos with different aspect ratios. This guarantees the entire video will be visible. She also clarifies that when the .container iframe CSS is applied the video will conform to the screen width, that is what makes it responsive. Iframes are age-old web audio and visual tool that is used on nearly every page on the web despite their reputation for being risky and harmful. When they are used consciously and sparingly an iframe can add interesting content that improves your users’ experience.
Important note: Older browsers may not support iframes, you should add content inside your iframe to display a message, “your browser does not support iframes” using:
<iframe> <p> Your browser does not support iframes</p> </iframe>Check out What is an iframe (And how to use them) from Elegant Themes to learn more.
This chapter is a revised version of a blog post titled “Using iframes consciously” on Mau Does Web Publishing.
