Iframes in HTML

Learn via video course
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
Start Learning
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
Start Learning
Topics Covered

HTML's <iframe> tag enables the integration of one HTML page into another, forming an inline frame. Commonly used for ads, videos, analytics, and interactive content, it creates a rectangular region for seamless interaction between the embedded webpage and the parent document, facilitated by JavaScript.

How To Use An Iframe in HTML

The purpose of iFrames is to allow content to be shared from other websites. If you wish to provide the readers with context about a certain topic, you can include an iframe tag. <iframe> tags can be used to insert an iframe element into an HTML document. In notepad, copy and paste the following code, then save the page as a .html file:



Elegant theme's YouTube video will be displayed by the code above.



Let's review each tag individually:

  1. An iFrame contains the video using the <iframe>...</iframe> tag.
  2. Content originating from external or internal servers is contained in the iFrame source (src). Make sure the URL contains the embedded code.
  3. The width and height of an iFrame determine its aspect ratio.
  4. As shown in the example, you can insert a fixed size of 690*470 pixels (px). Alternately, you can adjust the iFrame automatically by using a percentage-based method (10%-100%)

Attributes of Iframes in HTML

The attributes supported by <iframe> are

allowallow-top-navigation, allow-forms, allow-pointer-lock, allow-popupsDetermines an iframe's feature policy. Depending on where the request originates, the policy determines what features an <iframe> can access (like the microphone, camera, battery access, web-sharing API, etc
allowfullscreentrue,falseThis value is set to true if the iframe can invoke fullscreen mode with the requestFullscreen() method.
allowpaymentrequesttrue,falseA cross-origin <iframe> can invoke the Payment Request API if this property is set to true.
heightpixelsSpecifies the height of the frame in CSS pixels. By default, it is 150 pixels
loadingeager, lazyThis tells the browser how to load the iframe content.
nametextA name that can be used as a target in the embedded browsing context.
referrerpolicyno-referrer, no-referrer-when-downgrade, origin, origin-when-cross-origin, same- originstrict-origin-when-cross-origin, unsafe-urlWhen fetching the frame's resource, specifies the referrer to use.
sandboxallow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, allow-top-navigationImposes additional restrictions on content in frames. A value of empty tokens for all restrictions or a list of space-separated tokens for lifting individual restrictions can be specified.
srcURLSpecifies the URL of the embedded page. To embed an empty page conforming to the same-origin policy, enter a value of about. Note that Firefox (from version 65), Chromium-based browsers, and Safari/iOS will load about in the frame if you remove an <iframe>'s src attribute programmatically (e.g. via Element.removeAttribute())
srcdocHTML_CodeTo embed, use inline HTML to override the src attribute. In the case where a browser does not support the srcdoc attribute, the URL in the src attribute will be used.
widthpixelsIndicates the width of the frame in CSS pixels. The default value is 300 pixels.

Deprecated attributes

These attributes(<img>,<iframe> etc) are deprecated and may not be supported by all user agents. They should not be used in new content, and they should be removed from existing content.

alignleft,right,middle,top,bottomAligns the element according to its surrounding context.
frameborder0,1Draws a border around this frame when 1 is specified (the default). The value 0 removes the border around this frame, but it is best to control the border of an iframe using the CSS property border
longdescURLURL of a long description of the content displayed in the frame. For non-visual browsers, this is not helpful due to widespread misuse
marginheightpixelsThe space between the content of the frame and its top and bottom borders in pixels.
marginwidthpixelsThe space between the content of the frame and its left and right borders in pixels.
scrollingauto, yes, noProvides instructions for the browser when a scrollbar should be made available.

Examples of Iframes in HTML

Iframe - Set Height and Width

Iframe sizes are specified by the height and width attributes. For the attribute values, pixels are used by default, but percentage values, such as " 80% ", can be also used.

The height and width of the HTML iframe Tag can be set by using the height and width attributes and we can specify the values we need to customize to it our needs as in the example below


Iframe - Set Height and Width

Iframe - Remove Border

All iframes are framed by default with a border around them. If you want to remove the border, you must use the style attribute and CSS border property.

The border of the iframe by default can be removed by setting the style property value to none as in the example below.


Iframe - Remove Border

Iframe - Border Style

The border of the Iframe's can be changed in size, style, and color:

We can customize the border style by using the style property as per our needs. The border styles can be solid, dotted, dashed and double.


Iframe - Border Style

Iframe - Links

Iframes can be used as target frames for links. A link's target attribute must refer to the iframe's name attribute.

We can set the link as the target in iframe by specifying a name to it for example as iframe_a and using the name again as a target as shown in the example below. A link will open in an iframe when the target attribute matches the iframe name


Iframe - Links

Iframe - Google Forms

  • Step 1: Create the Google Form you'd like to embed.
  • Step 2: Click the Send button after you have created the form, as shown below.

iframe in google form

  • Step 3: From the list of options for sending, select embed. A link will appear in an iframe that has to be copied.

iframe in google forms with link option

  • Step 4: Add the following <iframe> link to the HTML source code of the page where the form should be embedded. The form will automatically appear and allow the user to fill it out directly on the page.

iframe with google forms with inframe link

We can embed google forms by having the form link in the src attribute of iframe as shown in the example below


Iframe - Google Forms

Supported Browsers

Here are the browsers supported by this Property:

Google Chrome 93.0Yes
Internet Explorer 11.0Yes
Firefox 92.0Yes
Microsoft Edge 93.0Yes
Opera 78.0Yes
Safari 14.1Yes

Note: However, you shouldn't overuse <iframe>. This can slow down your site and put your site at risk of malware, especially if the content comes from a suspicious site. Iframes should be considered as components of your content, not parts of your website. If you want to stimulate your readers by including a YouTube video, you can add an iFrame element to that post.


  • The purpose of iFrames is to allow content to be shared from other websites. If you wish to provide the readers with context about a certain topic, you can include an iframe tag.
  • Using iFrames will allow you to share other people's content in an ethical way, as well as display video and audio files without hosting them on your site.
  • iFrames are powerful for increasing engagement with your visitors. Remember to only use content from trusted sites if you still need to use it for development purposes.

I hope that this article will help you implement and understand iFrame