The HTML <iframe> tag is used to embed another HTML document within the current webpage. This powerful tag allows developers to display external content such as videos, maps, or entire web pages inside a frame without leaving the original site. By using the <iframe> tag, you can enhance the user experience by integrating rich media or dynamic content from external sources directly into your web pages.
Syntax of the <iframe> Tag
<iframe src="URL" width="width" height="height"></iframe>
- src: Specifies the URL of the content to be embedded.
- width: Sets the width of the iframe.
- height: Sets the height of the iframe.
Developers can also add additional attributes to control the behaviour and appearance of the iframe.
Attributes of the <iframe> Tag
The <iframe> tag supports several useful attributes that allow developers to customize the appearance and behavior of the embedded content. Here’s a list of key attributes:
| Attribute | Description |
|---|---|
| src | Specifies the URL of the embedded content. |
| width | Defines the width of the iframe (in pixels or percentage). |
| height | Defines the height of the iframe (in pixels or percentage). |
| frameborder | Specifies whether the iframe should have a border (0 means no border, 1 means border). |
| allowfullscreen | Enables fullscreen mode for the embedded content, if supported by the browser or media. |
| sandbox | Applies extra restrictions on the content inside the iframe (e.g., no scripts, forms, etc.). |
| name | Defines a name for the iframe, useful for targeting form submissions or links. |
| loading | Controls when the iframe should load (values: "lazy" for delayed loading, "eager" for immediate). |
| referrerpolicy | Specifies how much referrer information should be passed when navigating the iframe content. |
| allow | Specifies permissions for the iframe content, such as autoplay, camera, or microphone access. |
Examples of HTML <iframe> Tag
Example 1: Embedding a YouTube Video
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedded YouTube Video</title>
</head>
<body>
<h1>Watch This Video</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</body>
</html>
In this example, a YouTube video is embedded inside the iframe using the video URL.
Example 2: Embedding Google Maps
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedded Google Map</title>
</head>
<body>
<h1>Our Location</h1>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!..."
width="600" height="450" frameborder="0" style="border:0;"
allowfullscreen="" aria-hidden="false" tabindex="0">
</iframe>
</body>
</html>
In this example, a Google Map is embedded in the iframe to show the location of a business or place.
FAQs About HTML <iframe> Tag
Q1: What is the purpose of the HTML <iframe> tag?
A: The <iframe> tag is used to embed external content like videos, maps, or web pages within the current webpage without redirecting the user.
Q2: Can I control the size of the iframe?
A: Yes, you can control the size of the iframe by setting the width and height attributes in pixels or percentages.
Q3: Does the <iframe> tag support security restrictions?
A: Yes, the sandbox attribute allows developers to impose restrictions such as blocking scripts, forms, and navigation inside the iframe.
Q4: Can an iframe be made fullscreen?
A: Yes, using the allowfullscreen attribute, you can enable the embedded content to be displayed in fullscreen mode, such as with videos.
Q5: How does the loading attribute impact performance?
A: The loading attribute allows you to control when the iframe content is loaded. Using loading ="lazy" delays loading the iframe until it's needed, which improves page load time and performance.
