Iframes in HTML

HTML Iframes used to load the URL inside the other pages to include the resources of the webpage. It is the HTML element that allows the External document to be embedded inside the  HTML document on the website and it is used to include different types of media anywhere within a webpage. Let us understand HTML Iframes in detail.

What are HTML Iframes?

An Iframe is an HTML Element that stands for Inline frame Element which is used to insert the content of the document of the other page inside the current page, It uses the <iframe> tag to display the document on the website.

  • <iframe> tag use create a Rectangular region within the current webpage in which the browser can display a separate document including scrollbars and borders.
  • The iframe uses multiple Attributes to design and represent the content on the web browser.
  • The src attribute is used to implement the  HTML Iframe by specifying the URL of the document that contains the inline frame.
  • Javascript is used to make interactions between the web page content and the iframe document content. we will learn more about javascript in further articles.

Syntax of HTML Iframe

<iframe src=”URL”></iframes>

HTML <iframe>  tag are used to define under the <body> tag  and it  uses the src Attribute to include the source path of the content , It starts from the open tag with the attribute and then ends with the closing tag.

 HTML Iframe Attributes

 1. sandbox Attribute: It is used to give the document more security and also used to restrict the content in the iframe element. for example, it uses allow popup  attribute to enable popups in the document  if not applied then the popup will not open,

 2. allowfullscreen Attribute: it is used when if it is true then it allows the external document to open in full screen.

 3. name Attribute: It is used to allow a name for the iframe and it specifies that in which frame the document should be loaded into.

 4. scrolling Attribute: It is used when the browser needs to provide a scrollbar for the inline frame, it is mainly used in CSS.

 5. src Attribute: It is used to specifies the file name or the pathname and to indicate the value of the URL in the inline frame.

Basic Example of HTML Iframes

Using Height & Width Attribute: To change the size of the inline frame in pixels height and width attributes in the HTML document.

Example:

<!DOCTYPE html>
<html>
<body>

<h2> Example of HTML Iframes</h2>
<h3> Using height and width in inline frame </h3>
<p></p>

<iframe src="https://codedec.com/" height="200" width="300"> </iframe>

</body>
</html>

OUTPUT:

Using Style Attribute:  For changing the color and styling of the border from the inline frame style attribute and CSS border property is used.

Example:

<!DOCTYPE html> 
<html> 

<body> 

  <h2>using style attribute in iframe</h2> 

  <iframe src="https://codedec.com/"
  height="350" width="500" style="border:8px solid maroon;"> 

  </iframe> 

</body> 

</html>

OUTPUT: Using Link:  Inline frame used to target the link with the condition of the target attribute of the link must refer to the name attribute of the inline frame.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>targeting link by using Iframe</h2>

<iframe src="https://codedec.com/course/step-by-step-html-tutorial/" name="aman_iframe" height="350px" width="100%" ></iframe>

<p><a href="https://codedec.com/" target="aman_iframe">Codedec.com</a></p>


</body>
</html>

OUTPUT:  Before clicking the link below.

After clicking the link.

Embedding youtube video: For adding the youtube video on the webpage using the inline frame just copy the embed text in the share option of the video and put that to the HTML text of the webpage.

Example:

<!DOCTYPE html>
<html>
<body>

<h2>Adding youtube video using html Iframe </h2>

 <iframe width="500" height="300" src="https://www.youtube.com/embed/GbbSz12WGto" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>

OUTPUT: