HTML <iframe> Tag

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= 
"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.

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= 
"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

Article Tags :

HTML

Web Technologies

HTML5