HTML <iframe> Tag facilitates embedding the content from another source such as a video, map, or external website within a webpage. It simply specifies an inline frame.
Syntax
<iframe src=
"https://www.geeksforgeeks.org/"
title="GeeksforGeeks">
</iframe>
Note: It is important to include a title attribute for the <iframe> tag. Screen readers use this attribute to announce the purpose or content of the link.
Attributes
The below table shows the attribute, value, and description of the HTML <iframe> tag.
Attributes | Values | Descriptions |
|---|---|---|
| width | pixels | Adjusts the width of the <iframe>. The default is 300 pixels. |
| src | URL | Specifies the address of the document to embed. |
| allowfullscreen | true or false | Allows the <iframe> to activate fullscreen mode. |
| allowpaymentrequest | true or false | Enables the Payment Request API for cross-origin iframes. |
| loading | eager or lazy | Determines when the browser should load the <iframe>. |
| srcdoc | HTML code | Sets the HTML content to display within the <iframe>. |
| sandbox | allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation | Enforces restrictions for content within the <iframe>. |
| allow | Feature policy string | Specifies a feature policy for the <iframe>. |
| height | pixels | Sets the height of the <iframe>. Default is 150 pixels. |
| name | Text | Specifies a name for the <iframe>. |
| referrerpolicy | no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url | Controls referrer information for fetching the iframe. |
The <iframe> tag supports the Global Attributes and Event Attributes in HTML.
Example 1: Implementation of the iframe tag by using allowfullscreen attribute for activating fullscreen mode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Iframe Tag</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<iframe width="400"
height="200"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108102825/mern.mp4"
allowfullscreen loading="lazy">
</iframe>
</body>
</html>
Output:
Example 2: Another example illustrating the implementation of iframe tag by using allowfullscreen attribute for activating fullscreen mode and iframe border.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>HTML Iframe Tag</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<iframe width="400"
height="200"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240108102825/mern.mp4"
allowfullscreen style="border: 5px solid green;
box-sizing: border-box;">
</iframe>
</body>
</html>
Output:
Supported Browsers
- Chrome 1
- Edge 12
- Safari 4
- Firefox 1
- Opera 15
