Iframes in HTML

Iframes in HTML with Examples

In this article, I am going to discuss Iframes in HTML with Examples. Please read our previous article where we discussed CSS in HTML with Examples. At the end of this article, you will learn everything about HTML Iframes with Examples.

HTML Iframes

An HTML iframe is a container for displaying a web page within a web page. The < iframe> tag creates a rectangular area within an Html document where the browser can show a separate document with scrollbars and borders.

The src attribute specifies the URL of the page that will be displayed in the inline frame. JavaScript allows the content of the website and the contents of the iframe to interact with each other.

Iframe Syntax in HTML

The below syntax is used to add iframes to websites.

<iframe src=”url” title=”iframe_title”></iframe>

Iframe – Set Height and Width

We can use the Html width and height attributes to define the size of the iframe.:

<!DOCTYPE html>
<html>
<body>
<br>
<iframe  style="border:none;background-color:lightblue;"
width="500" height="300" title="Iframe Example"></iframe>

</body>
</html>
Output:

Iframe - Set Height and Width in HTML

The above example will create an iframe with a width of 500 px and a height 300 px.

Iframe – Border

An iframe has a border by default. We can remove the iframe border, change the style of the border, or adjust the size of the border to suit our needs.

To remove border
<!DOCTYPE html>
<html>
<body>
<br>
<iframe  style="border:none;background-color:slateblue;"
width="500" height="300" title="Iframe Example"></iframe>

</body>
</html>
Output:

Iframe - Border

To add style
<!DOCTYPE html>
<html>
<body>
<br>

<iframe  style="border:5px solid orange;background-color:slateblue;"
width="500" height="300" title="Iframe Example"></iframe>

</body>
</html>
Output:

Iframes in HTML with Examples

Iframe – Target for a Link

An iframe can be used as the link’s target frame. The link’s target attribute must correspond to the iframe’s name attribute. In the below example we have given the target attribute value as iframe_target. The iframe name attribute value and target attribute value must be the same then only it will work correctly otherwise it won’t work

<!DOCTYPE html>
<html>
<body>
<br>

<iframe  style="border:1px solid red;"
width="500" height="300" name="iframe_target" title="Iframe Example"></iframe>

<p><a href="https://www.dotnettutorials.net" target="iframe_target">Dot Net Tutorials</a></p>

</body>
</html>
Output:

Iframe - Target for a Link

Before clicking on the link, you can see that the frame is empty. When we click on the link, the webpage will open inside the empty iframe.

Embed YouTube video using iframe in HTML

You can also embed a YouTube video on your website using the <iframe> tag.

<!DOCTYPE html>
<html>
<body>
<br>

<iframe width="560" height="315" src="https://www.youtube.com/embed/35npVaFGHMY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>
Output:

Embed YouTube video using iframe in HTML

Embed Google map using iframe in HTML

You can also embed a Google map on your website using the <iframe> tag.

<!DOCTYPE html>
<html>
<body>
<br>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d241316.64332790065!2d72.74109997462705!3d19.08252232039457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3be7c6306644edc1%3A0x5da4ed8f8d648c69!2sMumbai%2C%20Maharashtra!5e0!3m2!1sen!2sin!4v1636379247018!5m2!1sen!2sin" width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

</body>
</html>
Output:

Embed Google map using iframe in HTML

In the next article, I am going to discuss Block-Level and Inline Elements in HTML with Examples. Here, in this article, I try to explain Iframes in HTML with Examples and I hope you enjoy this HTML Iframes with Examples article.

Leave a Reply

Your email address will not be published.