The HTML iframe tag embeds a web document onto a web page. An embedded document could be a PDF, a web page, or another asset. The src attribute defines the location of the embedded resource.
You can embed the contents of one web document, such as a PDF or a map from Google Maps, onto another page, using HTML.
That’s where the HTML <iframe> comes in. The HTML <iframe> tag is used to embed external objects such as other web pages into a single web page. This tutorial will discuss, with examples, how to use the HTML <iframe> tag to embed web resources into a web page.
HTML iframe
HTML iframes, or inline frames, display external web documents on a page. You can embed maps, PDFs, videos, or other resources using the <iframe> HTML tag.
The code stored within an inline frame is independent of the rest of a web page. Any styles or JavaScript that applies to your web page will not be applied within the iframe.
Here’s the syntax for the HTML <iframe> tag:
<iframe src="url"></iframe>
The <iframe> tag is used to create an iframe. We have specified an iframe src attribute. The attribute contains the location of the HTML elements we want to embed onto our web page. This should be an HTML URL.
iframe HTML Code Example
Let’s walk through an example to explore how the <iframe> tag works.
Suppose we are building a website for a local Washington, D.C. historical society. They want us to create a page with an embedded video from Khan Academy on the birth of the U.S. Constitution. This page is recommended material for anyone interested in joining the society. We could use the following code to embed the video into our website:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
Our code returns:
We used an <iframe> element to embed an external web resource onto our web page. The web resource that we have embedded is the link “https://www.youtube.com/embed/Rk8dCnKIfP4”. This points to the video the historical society wants to be shown on their website.
HTML Iframe Height and Width
The height attribute and width attribute are used to set the size of an iframe. Suppose the local Washington D.C. historical society wants us to make the video bigger on their site.
We are going to set the width of the YouTube video to be 500 pixels and the height to be 300 pixels:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4"></iframe>
Our code returns:
Our embedded video is now 500 pixels wide and 300 pixels tall on our HTML document. This makes it easier for people to see our video on the website.
Alternatively, we could set the width and height of the iframe tag using CSS. But, because HTML supports a height and weight attribute, this is not necessary.
Remove HTML iframe Border
When you’re working with the <iframe> tag, you’ll notice that its contents are surrounded by a border. If you want to remove this border, you can use the border:none; CSS attribute.
The historical society has asked us to remove the border around the YouTube video from their site. Here’s the code we would use to remove the border:
<iframe height="300" width="500" src="https://www.youtube.com/embed/Rk8dCnKIfP4" style="border:none;"></iframe>
Our code returns:
Our video now no longer has a border.
HTML iframe Link Targets
In addition, <iframe> tags can be used as the target frame for a link. We can set an iframe to be the target frame for a link using the target attribute in an HTML link. The target HTML attribute must refer to the name attribute of an <iframe>.
Suppose the historical society had another video they wanted us to show on their website on Article I of the U.S. Constitution. This video was also published by Khan Academy.
When the text Birth is clicked on the web page, the Birth of the U.S. Constitution video should be rendered in the iframe. When the text Article I is clicked, the video on Article I of the Constitution should be rendered.
We could use the following code to accomplish this task:
<iframe src="https://www.youtube.com/embed/Rk8dCnKIfP4" name="iframe1"></iframe><br /> <a href="https://www.youtube.com/embed/Rk8dCnKIfP" target="iframe1">Birth</a><br /> <a href="https://www.youtube.com/embed/CIFBjZU55so" target="iframe1">Article I</a>
Our code returns:
By default, the video on the birth of the U.S. Constitution is shown in the iframe. The contents of the iframe change to point to the video from Khan Academy on Article I of the Constitution. This happens when we click on the Article I URL.
Our iframe is redirected to the video on the birth of the Constitution if that video is not already featured when we click Birth.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Conclusion
The <iframe> HTML tag embeds external web resources such as web pages onto another web page. This is useful if you want to add maps, files, videos, or other web pages onto your site.
This tutorial discussed, with reference to examples, how to use the HTML <iframe> tag to render external web resources on a web page. Now you have the knowledge you need to start using the <iframe> tag like a pro!
To learn more about coding in HTML, read our guide to learning HyperText Markup Language.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
