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


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:





Specifies a feature policy for the <iframe>.


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


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



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


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



Enables the naming of an <iframe>.


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


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



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


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="" width="500" height="300">
  <p>Your browser does not support iframes.</p>



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.