Visitors to your website might want directions to your store via Google Maps, a roundup of your social media feeds, and a demo video that shows your product in use. Hosting all this media on your own web server can be time-consuming and costly.
An iframe can help if you’re looking for a way to embed content from external sources (like third-party sites, YouTube, Google Maps, or Facebook) without having to put it on your own web server. This guide will show you exactly what iframes are, how they work, when to use them, and how to add them to your site—along with the security and performance trade-offs to consider before implementing them.
What is an iframe?
An iframe—or inline frame—is an HTML element that lets you embed other HTML documents within your own page. This creates a “window” or “frame” where you can display web content from another source, allowing users to interact with it without leaving your site (the host or parent site). You can use an iframe element to embed video, maps, ads, and even https://www.shopify.com/blog/%3Ca%20href=”/blog/social-media-integration” target=”_blank”>social media feeds, while the content is hosted on other external platforms.
Websites typically use iframes to embed video from sources like Vimeo or https://www.shopify.com/blog/%3Ca%20href=”/blog/youtube-marketing” target=”_blank”>YouTube, display Google Maps, integrate widgets like chatbots, calendars, booking forms, or social media feeds, and run ads or affiliate banners. You can also include dashboards and data visualizations, preview documents like slideshows or PDFs, and integrate prebuilt payment forms.
How does iframe work?
An iframe is an HTML element that works on all major browsers and is included in the latest HTML5 specifications. When a browser encounters an iframe element in your code, it creates a separate environment that displays external web or media content directly within your page. To your users, it looks like the content is part of your site, even though the iframe content is hosted on another web server.
Your site (the parent) loads the new content (the child), creating a complete nested browsing context that can include and load JavaScript and CSS from the child site. The embedded content can load and refresh independently of the parent site. You (the parent site) can control the iframe’s size and position, and how much access it has to your site.
An iframe uses extra memory and processing, so loading more than one or two per page can slow https://www.shopify.com/blog/%3Ca%20href=”/enterprise/blog/website-performance” target=”_blank”>performance, increase https://www.shopify.com/blog/%3Ca%20href=”/enterprise/blog/site-performance-page-speed-ecommerce” target=”_blank”>load times, and make the site feel sluggish, especially on mobile devices.
How to embed iframes
The traditional way to add an iframe element is to insert the iframe tag into your web page’s HTML code. If you’re using a web builder or other application, there may be a tool or WYSIWYG system you can use to add the iframe element to the code. Here are two common ways to embed your iframe:
1. How to add an iframe tag to your HTML page
To add an iframe tag to your HTML page, open your document and insert the iframe tag:
src=”https://www.shopify.com/blog/%3Ca%20href=”https://player.vimeo.com/video/123456789″ target=”_blank” rel=”nofollow noopener noreferrer”>https://player.vimeo.com/video/123456789”
width=”640″
height=”360″
allow=”autoplay; fullscreen; picture-in-picture”
allowfullscreen>
In this example, the src attribute is the URL of the video you’re embedding, and the width and height define how large the embedded video appears on your site. The width attributes don’t need to be absolute pixel sizes—they can also be percentages of the window size, a factor in https://www.shopify.com/blog/%3Ca%20href=”/blog/responsive-web-design” target=”_blank”>responsive design to allow for different devices like phones or tablets. The frameborder element removes any old-school borders around the video frame, and the allow permissions attribute lets the video play automatically without user interaction in full screen and in picture-in-picture (options that load in the video window).
Other attributes to the iframe element include:
-
Srcdoc. Embeds raw HTML directly into the iframe.
-
Name. Gives the iframe a name so links or scripts can target it.
-
Title. Describes the iframe content for https://www.shopify.com/blog/%3Ca%20href=”/blog/website-accessibility” target=”_blank”>accessibility and https://www.shopify.com/blog/%3Ca%20href=”/blog/shopify-seo”>SEO, helping search engines understand what the embedded content contains.
-
Loading. Controls when the iframe loads—set to “lazy” to improve page speed by loading iframes only when users scroll to them.
-
Sandbox. The sandbox attribute restricts what the iframe can do, blocking scripts, forms, pop-ups, etc., unless explicitly given permission—which protects your site from potentially malicious embedded content.
-
Referrer policy. Controls what referrer info (like the URL of your own page) gets sent to the iframe source page.
2. How to copy iframe code from the content source
If you’re embedding a video or other content from a hosting source like YouTube, Vimeo, or Google Maps, copy the entire iframe code from there and paste it into your web page.
For example, if you’re using Vimeo, navigate to the video you want to embed, then click on the Embed button.
You’ll then see a sidebar where you can adjust settings such as where the video can be embedded, whether it appears as fixed or responsive, and playback options like autoplay, mute, or loop. Hit the Copy embed code button and then paste that code into your HTML page where you want the embed to appear.
YouTube is similar—click the Share button under the YouTube video you want to embed, then the Embed button, copy the code, and paste it into your HTML code.
Embedding a Google Map is a bit more complicated. You need Google to create an https://www.shopify.com/blog/%3Ca%20href=”/blog/api-key-explained” target=”_blank”>API key for your account, then place a URL with the parameters you want and your API key in it. For example:
https://www.google.com/maps/embed/v1/MAP_MODE?key=YOUR_API_KEY&PARAMETERS)
You can then add the URL with the map mode, API key, and parameters into your iframe code like this:
width=”450″
height=”250″
frameborder=”0″ style=”border:0″
referrerpolicy=”no-referrer-when-downgrade”
src=”https://www.google.com/maps/embed/v1/place
?key=YOUR_API_KEY
&q=Eiffel+Tower,Paris+France
“
allowfullscreen>
The q parameter above lets you define the map marker location that will load into your page. It can be a place name, address, or Google place ID.
Paste that code into your web page, and the map you choose will appear on the page.
Advantages of using iframes
An iframe can help you create a website that fulfills user needs. Here are the major benefits:
Rich content
An iframe lets you include content that you might not be able to create or host yourself. It makes embedding maps, video, and social media feeds much simpler than managing those separate systems on your own server.
Better user experience
Your users will appreciate the added functionality your iframe content provides, like previewing PDFs, using loan calculators, or playing simple HTML games from the other site. Best of all, they can interact with this content without ever leaving your page.
Save on bandwidth and server resources
Hosting your own videos can end up costing you more in bandwidth charges and stress your server resources. Since the embedded videos and other content live elsewhere, your web server won’t bear the load of hosting them. That could lead to improved page performance and maybe even reduced hosting costs.
Disadvantages of using iframes
- https://www.shopify.com/blog/%3Ca%20href=”https://www.shopify.com/blog/what-is-an-iframe#11″>Risk of security exploits
- https://www.shopify.com/blog/%3Ca%20href=”https://www.shopify.com/blog/what-is-an-iframe#22″>Lower SEO scores
- https://www.shopify.com/blog/%3Ca%20href=”https://www.shopify.com/blog/what-is-an-iframe#33″>Newer options available
- https://www.shopify.com/blog/%3Ca%20href=”https://www.shopify.com/blog/what-is-an-iframe#44″>Potential copyright infringement
There are some concerns regarding using iframes, and alternate techniques for including dynamic content can sometimes be a better fit:
Risk of security exploits
While the
