HTML – Iframes

HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML <iframe> tag defines an inline frame, hence it is also called as an Inline Frame.

An HTML iframe embeds another document within the current HTML document in the rectangular region.

The webpage content and iframe contents can interact with each other using JavaScript.

Syntax of Iframe

 <iframe src="URL"></iframe>  

Set Width and Height of Iframe

You can set the width and height of iframe by using “width” and “height” attributes. By default, the values of the attributes are specified in pixels but you can also set them in percent. i.e. 50%, 60% etc.

<body>    
      <h2>HTML Iframes using pixels</h2>    
      <iframe src="https://www.google.com/" height="300" width="400"></iframe>    
</body>
<body>    
      <h2>HTML Iframes using percentage</h2>    
      <iframe src="https://www.google.com/" height="50%" width="70%"></iframe>    
</body>
<body>    
      <h2>HTML Iframes using CSS style property</h2>    
      <iframe src = "https://www.google.com/" style = "height:500px;width:400px"></iframe>    
</body>

Remove Border of Iframe

By default, an iframe contains a border around it. You can remove the border by using <style> attribute and CSS border property.

<body>    
      <h2>Remove Iframe border</h2>    
      <iframe src = "https://www.google.com/" height="300" width="400" style="border:none;"></iframe>    
</body>

We can also change the size, color, style of the iframe’s border. Below is an example to illustrate the same:-

<iframe src = "https://www.google.com/" height="300" width="400" style="border:10px solid #333;></iframe>

Iframe Target For a Link

We can set a target frame for a link by using iframe. Your specified target attribute of the link must refer to the name attribute of the iframe.

<body>    
      <iframe height= "300px" width= "100%"   src=" new1.html" name="iframe_a"></iframe>  
	     <a href= "https://google.com/"   target="iframe_a">Google.com</a> 
</body>

Here, in the above example, the name of iframe and link target must have the same value else link will not open as a frame.

Whenever a user clicks on google.com, Google link will open in the same frame of new1.html.


Embedded YouTube Video For an Iframe

You can also add a YouTube video on your webpage using the <iframe> tag. The attached video will be played at your webpage and you can also set height, width, autoplay, and many more properties for the video.

Following are some steps to add YouTube video on your webpage:

  • Goto YouTube video which you want to embed.
  • Click on SHARE ➦ under the video.
  • Click on Embed <> option.
  • Copy HTML code.
  • Paste the code in your HTML file
  • Change height, width, and other properties (as per requirement).
<body>    
      <iframe width= "538" height= "394" src= "https://www.youtube.com/embed/VUV8g2JZmjE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </body>

Attributes of Iframe

AttributeValueDescription
allowfullscreenIf true then that frame can be opened in full screen.
heightPixelsIt defines the height of the embedded iframe, and the default height is 150 px.
nametextIt gives the name to the iframe. The name attribute is important if you want to create a link in one frame.
frameborder1 or 0It defines whether iframe should have a border or not. (Not supported in HTML5).
WidthPixelsIt defines the width of the embedded frame, and the default width is 300 px.
srcURLThe src attribute is used to give the pathname or file name which content to be loaded into an iframe.
sandboxThis attribute is used to apply extra restrictions for the content of the frame.
allow-formsIt allows submission of the form if this keyword is not used then form submission is blocked.
allow-popupsIt will enable popups, and if not applied then no popup will open.
allow-scriptsIt will enable the script to run.
allow-same-originIf this keyword is used then the embedded resource will be treated as downloaded from the same source.
srcdocThe srcdoc attribute is used to show the HTML content in the inline iframe. It overrides the src attribute (if a browser supports).
scrollingIt indicates that the browser should provide a scroll bar for the iframe or not. (Not supported in HTML5)
AutoScrollbar only shows if the content of iframe is larger than its dimensions.
YesAlways shows scroll bar for the iframe.
NoNever shows scrollbar for the iframe.

Supporting Browsers

ElementChromeIEFirefoxOperaSafari
<iframe>YesYesYesYesYes