HTML <iframe> Tag
Last Updated :
10 Jan, 2024
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.
HTML
<!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 =
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.
HTML
<!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 =
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
Share your thoughts in the comments
Please Login to comment...