HTML Iframes – HTML Inline Frame Element

HTML iframes or inline frames are used to display different web-pages within the current web-page. It consists of a rectangular region where different web-pages can be displayed or separated into sections. An iframe is defined by the <iframe> element in HTML5.

html iframes

HTML IFrame Syntax-

<iframe src=””></iframe>

Keeping you updated with latest technology trends, Join DataFlair on Telegram

HTML Iframes Attributes

NameDescription
srcThis attribute is for specifying the name of the file that should be loaded in the frame.
srcdoc It is useful to specify the content that should be displayed within an iframe.
nameThis attribute is useful to specify a name to the iframe. This could be necessary while linking multiple frames.
marginwidthIt is to specify the spacing between the left and right frame borders and the frame content. It is defined in pixels..However, this is not supported in HTML5, the CSS padding property can be used instead.
marginheightThis attribute is used to specify the spacing between the top and bottom frame borders and the frame content. It is defined in pixels.However, this is not supported in HTML5, the CSS padding property can be used instead.
heightIt specifies the height of the frame.
widthThis attribute is useful to specify the width of the frame.
scrollingIt controls the scrollbars of the frame. It takes the values, ‘yes’, ‘no’, or ‘auto’.
sandboxIt defines the constraints regarding the content of iframe.

For Example-

<!DOCTYPE html>
<html>
<head>
  <title>MyFrame</title>
  <style>
    #one{
      position: absolute;
      top: 50px;
      left: 1190px
    }
    #two{
      position: absolute;
      bottom: -150px;
      top: 50px;
    }
    #three{
      position: absolute;
      bottom: -150px;
      left: 316px;
      top: 50px;
    }

body {
  margin: 0px;
  font-family: 'segoe ui';
}
  </style>
</head>
<body>
<h2><center>My Frames</center></h2>
<iframe id="one" srcdoc="<center><h1><b> Section3</center</h1></b>" name="header" height="700px" width="320px"style="border:4px solid orange;"></iframe>
<iframe id="two" srcdoc="<center><h1><b> Section1</center</h1></b>" name="navigate" height="700px" width="310px" style="border:4px solid orange;"></iframe>
<iframe id="three" srcdoc="<center><h1><b>Section2</center</h1></b>" name="okay" height="700px" width="870px" style="border:4px solid orange;"></iframe>
</div>
</body>
</html>

Output-

HTML Iframes

Setting Height and Width in HTML Inline Frames

The size of HTML iframe is specified using the height and width attributes. The values of these attributes could be either in pixels or percentages. For example,

<!DOCTYPE html> 
<html>   
<body>   
    <p>Content here</p>  
    <iframe src="https://data-flair.training/blogs/" height="400px" width="400px"></iframe>   
</body>   
</html>

Output-

setting height and width in HTML

Removing Border in HTML Inline Frames

The CSS border property is to remove the border of an iframe. By default, an iframe has a border.

<!DOCTYPE html> 
<html>   
<body>   
    <p>Content here</p>  
    <iframe src="https://data-flair.training/blogs/" height="400" width="400" style="border:none;"></iframe>   
</body>   
</html>

Output-

removing border in HTML

Styling Border in HTML Iframe

We can style the border of the iframe using CSS.

Code-

<!DOCTYPE html> 
<html>   
<body>   
    <p>Content here</p>  
    <iframe src="https://data-flair.training/blogs/" height="400" width="400" style="border:4px solid red"></iframe>   
</body>   
</html>

Output-

styling border in Iframes in HTML

Target for a link

An iframe can be the target of a specific link. The name of the iframe must be specified as the target of the link.

<!DOCTYPE html> 
<html>   
<body> 
     <p>Click the link in the text</p> 
    <iframe height="300" width="350" src="https://data-flair.training/blogs/"name="frame_a"></iframe> 
    <p><a href= "https://data-flair.training/hadoop-spark-developer-course/" target="frame_a">DataFlair</a></p> 
</body> 
  
</html>

Output-
Before clicking the link-

html target for a link

After clicking the link-

html iframes target for a link

Embed Youtube Videos on Iframes in HTML

We can embed Youtube Video on iframes by following these steps-

  • Go to the youtube video you wish to embed.
  • Click on share.
  • Click on the ‘embed’ option.
  • Copy the HTML code on to your HTML document.
  • Set the width and height of the iframe as per the preference.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/UZRkpGk943Q" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</body>
</html>

Output-

html embed youtube video

Supported Browsers

  • Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Summary

Iframes in HTML are useful to embed different web pages on a single web page. They are defined using the <iframe> tag. In this article, we saw the common attributes of inline frames and their manipulation using CSS. We’ve also looked at the linking of iframes with links defined by the anchor element.

Leave a Reply

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.