HTML Iframes

HTML Iframe is used to display a nested webpage or a webpage within a webpage. The HTML <iframe> tag defines an inline frame.

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

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

Iframe Syntax:

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

Set Width and Height of iframe:

You can set the width and height of the 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.

Example: Pixels

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<iframe src="https://www.i2tutorials.com/" height="300" width="400"></iframe>
</body>
</html>

OUTPUT:

HTML Iframes

Example: Percentage

<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<iframe src="https://www.i2tutorials.com/" height="50%" width="70%"></iframe>
</body>
</html>

OUTPUT:

Remove the border of iframe:

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

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Remove the Iframe Border</h2>
<iframe src="https://www.i2tutorials.com/" style="border:none;"></iframe>
</body>
</html>

OUTPUT:

HTML Iframes

Change the size, style, and color of the iframe’s border property :

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Custom Iframe Border</h2>
<iframe src="https://www.i2tutorials.com/" style="border:2px solid tomato;"></iframe>
</body>
</html>

OUTPUT:

HTML Iframes

Iframe Target for a link:

You can specify the target attribute of the link must refer to the name attribute of the iframe.

Example:

<h2>Iframe - Target for a Link</h2>
<iframe src="demo_iframe.htm" name="iframe_a" height="300px" width="100%" title="Iframe Example"></iframe>
<p><a href="https://www.i2tutorials.com/" target="iframe_a">i2tutorials.com</a></p>

OUTPUT:

Embed YouTube video using iframe:

You can also add a YouTube video on your webpage using the <iframe> tag. The attached video will be played on 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 to your webpage: