HTML <iframe> Tag

In this post, we will talk about Tag iframe examples. Aspiring to meet the demands of learning.

The HTML <iframe> tag is used to embed another HTML document within the current document. The content of the <iframe> tag is typically a separate HTML file, although it can also be a PDF file, an image file, or any other type of document that can be displayed in a web browser.

The markup for an inline frame is as follows:


<!DOCTYPE html> <html> <body> <iframe src="" title="mrexamples Free Online Web Tutorials"></iframe> </body> </html>

Setting and removing iframe borders using CSS:


<!DOCTYPE html> <html> <body> <iframe src="" width="50%" height="250" style="border:2px dotted blue"> </iframe> <iframe src="" width="50%" height="250" style="border:none;"> </iframe> </body> </html>

Here is an example of <iframe> to embed youtube video:


<!DOCTYPE html> <html> <body> <iframe width="560" height="315" src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </body> </html>

Tag iframe Usage

The Tag iframe <iframe> refers to an inline frame.

Inline frames allow another document to be embedded within the current HTML document.

Advice: It is recommended to ensure that you add a title attribute for the <iframe>. By using this, screen readers can read the content of the <iframe>.

Key-Features and Uses

Here are some key features and uses of the <iframe> tag:

  • The <iframe> tag is commonly used to embed external content from another website, such as a YouTube video, a Google Map, or a social media post. This allows web developers to display content from other sources within their own website.
  • The <iframe> tag can be used to create an inline frame within a web page. This can be useful for displaying content that needs to be scrolled or that needs to be displayed separately from the surrounding content.
  • The <iframe> tag allows web developers to specify the dimensions and location of the embedded content. This can be useful for controlling the display area of the embedded content and for integrating it seamlessly with the surrounding content.
  • The use of the <iframe> tag can present security risks, such as the potential for cross-site scripting (XSS) attacks. As such, it is important to properly sanitize any user-generated content that is embedded within an <iframe> tag, and to ensure that the embedded content is trusted and secure.
  • The <iframe> tag is supported by all major web browsers, and is widely used in web development for embedding external content within web pages.


heightpixelsAn iframe’s height is set here. 150 pixels is the default height.
Indicates whether an <iframe> should be loaded immediately or if it should be delayed until certain conditions are met.
allowA feature policy is defined for the <iframe>
It is set to true if the <iframe> is capable of activating fullscreen mode with the requestFullscreen() method.
Enable cross-origin iframes to access the Payment Request API by setting it to true
srcdocHTML_codeDisplays the HTML content of a page within an <iframe>.
nametextProvide the name of an <iframe>
This property determines which referrer data is to be sent when fetching the iframe.
srcURLIndicate the address of the document to embed in the <iframe>.
widthpixels<iframe> width is specified here. A width of 300 pixels is the default.
Allows extra restrictions to be applied to content in an <iframe>

Browser Compatibility





mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]




The Tag iframe <iframe> in HTML allows for and accepts Global Attributes.


The Tag iframe <iframe> accepts Event Attributes in HTML.

Predefined CSS

It is common for browsers to render the <iframe> element with default values as follows:

iframe:focus {
outline: none;
iframe[seamless] {
display: block;

HTML <iframe> Tag Advantages

The HTML <iframe> tag provides several advantages for web developers. Here are some of the key advantages:

  • The <iframe> tag allows web developers to embed external content within a web page, such as videos, maps, or social media posts. This makes it easy to integrate content from other sources within a website, without having to create the content from scratch.
  • The <iframe> tag provides a high degree of control over how the embedded content is displayed within the web page. Developers can set the size and position of the content, and can use CSS to style the content to match the rest of the page.
  • Because the content is hosted externally, updates to the embedded content can be made independently of the web page itself. For example, if a video embedded in a page is updated, the changes will be automatically reflected in the embedded content, without any changes needed to the web page code.
  • Because the embedded content is hosted externally, it can be loaded asynchronously, which can improve page load times and overall site performance.
  • The <iframe> tag can be used to facilitate cross-domain communication between different web pages, which can be useful for web applications that require communication between different components.
If this article somewhere met your educational desires, then do share this valuable information with your friends as well by clicking the links below.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *