HTML Iframes –

0 0 4 minutes read

An 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 an Inline frame.

An HTML iframe embeds another document within the current HTML document in a rectangular region. The webpage content and iframe contents can interact with each other using JavaScript.

Note: Modern web dev often avoids iframe navigation for UX/security reasons. A safer/more modern approach is embedding content via APIs or <object>, depending on the use case.

iframe Syntax

An HTML iframe is defined with the <iframe> tag:

Here, the “src” attribute specifies the web address (URL) of the inline frame page.

Set the Width and Height of the iframe

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

Example: (Pixels)

Example: (Pixels)

<!DOCTYPE html><br />
<html><br />
<body><br />
<h2> HTML iframes example </h2><br />
<p> Use the height and width attributes to specify the size of the iframe: </p><br />
<iframe src=” height=”300″ width=”400″> </iframe><br />
</body><br />
</html><br />

Execute Code

Output:

HTML iframes

Example: (Percentage)

<!DOCTYPE html><br />
<html><br />
<body><br />
<h2>HTML Iframes</h2><br />
<p>You can use the height and width attributes to specify the size of the iframe:</p><br />
<iframe src=” height=”50%” width=”70%”></iframe><br />
</body><br />
</html><br />

Execute Code

Output:

HTML iframes

You can also use CSS to set the height and width of the iframe.

Example:

<!DOCTYPE html><br />
<html><br />
<body><br />
<h2>HTML Iframes</h2><br />
<p>Use the CSS height and width properties to specify the size of the iframe:</p><br />
<iframe src=” style=”height:300px;width:400px”></iframe><br />
</body><br />
</html><br />

Execute Code

Output:

HTML iframes

Remove the border of the iframe

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

Output:

HTML iframes

You can also change the size, colour, and style of the iframe’s border.

Example:

<!DOCTYPE html><br />
<html><br />
<body><br />
<h2>Custom Iframe Border</h2><br />
<iframe src=” style=”border:2px solid tomato;”></iframe><br />
</body><br />
</html><br />

Execute Code

Output:

HTML iframes

iframe Target for a link

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

Example:

<!DOCTYPE html><br />
<html><br />
<body></p>
<p><h2>Iframe – Target for a Link</h2><br />
<iframe height=”300px” width=”100%” src=”new.html” name=”iframe_a”></iframe><br />
<p><a href=” target=”iframe_a”>JavaTpoint.com</a></p><br />
<p>The name of iframe and link target must have same value else link will not open as a frame. </p></p>
<p></body><br />
</html><br />

Execute Code

Output:

HTML iframes

Output (new.html):

<!DOCTYPE html>
<html>
<head>
<style>

p{ font-size: 50px;
color: red;}
</style>
</head>
<body style="background-color: #c7f15e;">
<p>This is a link below the iframe. Click on the link to open a new iframe. </p>
</body>
</html>

Embed YouTube video using iframe

You can also add a YouTube video to 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.

The following are some steps to add a YouTube video to your webpage:

Go to the YouTube video that you want to embed.
Click on SHARE ➦ under the video.
Click on the Embed <> option.
Copy HTML code.
Paste the code in your HTML file
Change height, width, and other properties (as per requirement).

Example 1

<iframe width=”550″ height=”315″<br />
src=”<br />
allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture”<br />
allowfullscreen> </iframe><br />

Example 2

<iframe width=”550″ height=”315″<br />
src=”<br />
allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture”<br />
style=”border:0; padding:20px;”><br />
</iframe><br />

Output:

HTML iframes

Attributes of <iframe>

Attribute name	Value	Description
allowfullscreen		Boolean attribute. It doesn’t take true/false; it only enables full-screen.
height	Pixels	It defines the height of the embedded iframe, and the default height is 150 px.
name	text	It gives the name to the iframe. The name attribute is important if you want to create a link in one frame.
frameborder	1 or 0	It defines whether the iframe should have a border or not. (Not supported in HTML5).
Width	Pixels	It defines the width of the embedded frame, and the default width is 300 px.
src	URL	The src attribute is used to give the path name or file name whose content is to be loaded into the iframe.
sandbox
		This attribute is used to apply extra restrictions to the content of the frame.
	allow-forms	It allows submission of the form; if this keyword is not used, then form submission is blocked.
	allow-popups	It will enable popups, and if not applied, then no pop-up will open.
	allow-scripts	It will enable the script to run.
	allow-same-origin	If this keyword is used, then the embedded resource will be treated as downloaded from the same source.
	srcdoc	The srcdoc attribute is used to show the HTML content in the inline iframe. It overrides the src attribute (if a browser supports).
scrolling
		It indicates whether the browser should provide a scroll bar for the iframe or not. (Not supported in HTML5)
	auto	Scrollbar only shows if the content of the iframe is larger than its dimensions.
	yes	Always shows a scroll bar for the iframe.
	no	Never shows a scrollbar for the iframe.

Security Considerations

There are security risks that can be created by using iframes unless handled in the right manner. As an example, content that uses embedded external websites can create the risk of clickjacking or script injections. To counter these:

Take a sandbox attribute to limit the frame behaviour (block scripts, forms, or popups).
Never leave an unverified source dangling as src, or domain, etc.
Integrate the sandbox with the ability to allow attributes to have more precise control.

Responsive iframes

iframes by default fail to resize across devices. To get them responsive, style with percentages and aspect ratios (or padding method on older browsers).

Example (using aspect-ratio):

<iframe src=”<br />
        style=”width:100%; aspect-ratio:16/9; border:0;”<br />
        allowfullscreen> </iframe><br />

Explanation

This ensures the iframe is adaptive to mobile, tablet, and desktop screens.

Using the srcdoc Attribute

The srcdoc attribute is similar to the src attribute, except it allows you to write your own inline content as part of the iframe instead of loading a file. It replaces the src attribute when this is supported by the browser.

Example:

<iframe srcdoc=”<p style=’color:blue;’>Hello from inside the iframe! </p>”> </iframe>

This can come in handy during testing or the embedding of some custom content.

Cross-Domain Communication (postMessage)

The parent page and iframe contents require interaction with each other in a secure context; do not access the DOM directly (this would be blocked by the same-origin policy). Use the postMessage API instead.

Parent page:

document.getElementById(“myiframe”).contentWindow.postMessage(“Hello!”, “*”);

iframe page:

window.addEventListener(“message”, (event) => {<br />
  console.log(“Message from parent:”, event.data);<br />
});<br />

This trick is commonplace in many applications (e.g., embedding payment forms, widgets).

Conclusion

Iframes embedded with HTML are a very strong and useful feature. These are used to embed external content like web pages, videos, and widgets. They are handy and flexible, but even the contemporary context demands great attention to responsiveness, security, and accessibility. Sandboxing, srcdoc, postMessage and responsive CSS technologies make iframes safer and more flexible today in web development. With best practices, developers can make sure that the iframes improve user experience and do not negatively impact performance and security.

Next TopicHTML JavaScript