HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <iframe> Tag


The <iframe> tag allows web developers to embed a document within another HTML document. Here’s a more in-depth breakdown:

The <iframe> tag is a container that will enable developers to display an external webpage within their own, creating a browser window within the page. This concept can be essential for layered content presentation and modular webpage designs, which otherwise would not be possible with static HTML alone

The <iframe> tag creates an inline frame, which is essentially a nested browsing context within your page. It allows for the inclusion of another HTML page into the main document without disrupting the structure. This can be particularly useful for including content that is hosted elsewhere, like a YouTube video or a Google Map.

Example 1: Embedding a Video

<iframe width="560" height="315" src="https://bit.ly/45FZhcv" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Example 2: Embedding a Map

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.019247637726!2d-122.41941548468183!3d37.77492927975914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085808f74a343a3%3A0x76de8f7ef8c08b2!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2sin!4v1633696752545!5m2!1sen!2sin" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Try it below

Loading

Global Attributes

The <iframe> tag supports all global attributes in HTML.

Event Attributes

The <iframe> tag also supports all event attributes in HTML.

The HTML <iframe> tag has a crucial role in web development as it allows the embedding of one webpage within another webpage. Here are some key attributes related to the iframe tag:

Attribute

Value

Description

allow

Specifies a feature policy for the <iframe>.

allowfullscreen

If set to true, the <iframe> can activate fullscreen mode by using the requestFullscreen() method.

allowpaymentrequest

If set to true, a cross-origin <iframe> can invoke the Payment Request API.

height

pixels

Specifies the height of an <iframe>. The default height is 150 pixels.

loading

Specifies when a browser should load an <iframe>, either immediately or upon certain conditions being met.

name

text

Enables the naming of an <iframe>.

referrerpolicy

no-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin-when-cross-origin, unsafe-url

Determines the referrer information sent when fetching the <iframe>.

sandbox

allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation

Activates an additional set of restrictions for the content in an <iframe>.

src

URL

Specifies the URL of the document to embed in the <iframe>.

srcdoc

HTML code

Specifies the HTML content displayed in the <iframe>.

For instance, here is an example of how an iframe tag can be used:

<iframe src="https://www.example.com" width="500" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

 

Loading

Browser Support

Browser Support
Chrome Yes
Firefox Yes
Safari Yes
Opera Yes
IE Yes

Default CSS Settings

Most browsers will display the <iframe> element with the following default CSS settings:

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}

 

The <iframe> tag is an essential tag in modern web development, allowing for the seamless integration of other content into your web pages. Whether it’s a video, a map, or an entire webpage, the <iframe> tag provides a simple and effective way to enhance your site’s content and functionality.


However, it’s important to use this tag responsibly, ensuring that you respect user privacy and security by only embedding content from trusted sources.