An HTML iframe serves the purpose of showcasing a nested webpage, which is essentially a webpage contained within another webpage. The HTML <iframe> element is responsible for creating an inline frame, which is commonly referred to as an Inline frame in web development jargon.
An HTML iframe is used to display another document within the current HTML document in a defined rectangular area. The contents of the webpage and the contents of the iframe can communicate and interact with each other through 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 declared using the <iframe> element:
<iframe src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"> </iframe>
The "src" attribute is used to indicate the URL of the page to be loaded within the inline frame.
Set the Width and Height of the iframe
Adjust the dimensions of the iframe by utilizing the attributes "width" and "height". The default unit for these attributes is pixels; however, you have the flexibility to specify them in percentages as well. For instance, you can use values like 50%, 60%, and so on.
Example: (Pixels)
Example: (Pixels)
<!DOCTYPE html>
<html>
<body>
<h2> HTML iframes example </h2>
<p> Use the height and width attributes to specify the size of the iframe: </p>
<iframe src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" height="300" width="400"> </iframe>
</body>
</html>
Output:
Example: (Percentage)
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>You can use the height and width attributes to specify the size of the iframe:</p>
<iframe src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" height="50%" width="70%"></iframe>
</body>
</html>
Output:
CSS can also be utilized for defining the dimensions of the iframe element.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>Use the CSS height and width properties to specify the size of the iframe:</p>
<iframe src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" style="height:300px;width:400px"></iframe>
</body>
</html>
Output:
Remove the border of the iframe
Typically, an iframe includes a border by default. To eliminate the border, you can achieve this by employing the <style> attribute in conjunction with the CSS border property.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Remove the Iframe Border</h2>
<p>This iframe example doesn't have any border</p>
<iframe src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" style="border:none;"></iframe>
</body>
</html>
Output:
It is also possible to adjust the dimensions, color, and design of the border of the iframe.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Custom Iframe Border</h2>
<iframe src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" style="border:2px solid tomato;"></iframe>
</body>
</html>
Output:
iframe Target for a link
By utilizing an iframe, it is possible to establish a designated frame for a link. The target attribute of the link should be directed to the name attribute of the iframe in order to specify the target frame.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" name="iframe_a"></iframe>
<p><a href="https://logic-practice.com" target="iframe_a">logic-practice.com</a></p>
<p>The name of iframe and link target must have same value else link will not open as a frame. </p>
</body>
</html>
Output:
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
To embed a YouTube video on your website, you can utilize the <iframe> element. This will allow the video to be displayed directly on your webpage, giving you the flexibility to adjust parameters such as dimensions, autoplay settings, and other customizable options for the video playback.
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"
src="https://placehold.co/800x600/1abc9c/ffffff?text=Sample+Image"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen> </iframe>
Example 2
<iframe width="550" height="315"
src="https://placehold.co/800x600/1abc9c/ffffff?text=Sample+Image"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
style="border:0; padding:20px;">
</iframe>
Output:
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.
<iframe src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" sandbox="allow-scripts allow-same-origin"> </iframe>
Responsive iframes
By default, iframes do not resize properly on various devices. To make them responsive, you can apply styling using percentages and aspect ratios. For older browsers, the padding method can also be used to achieve responsiveness.
Example (using aspect-ratio):
<iframe src="https://placehold.co/800x600/1abc9c/ffffff?text=Sample+Image"
style="width:100%; aspect-ratio:16/9; border:0;"
allowfullscreen> </iframe>
Explanation
This guarantees that the iframe will adjust responsively to screens of varying sizes such as mobile devices, tablets, and desktop computers.
Using the srcdoc Attribute
The srcdoc attribute functions similarly to the src attribute, enabling the inclusion of custom inline content within an iframe instead of loading an external file. It serves as a substitute for the src attribute in cases where browser support allows for it.
Example:
<iframe srcdoc="<p style='color:blue;'>Hello from inside the iframe! </p>"> </iframe>
This functionality can be useful for testing purposes or when integrating custom content.
Cross-Domain Communication (postMessage)
Interaction between the parent page and iframe contents in a secure manner requires avoiding direct access to the DOM, as this would violate the same-origin policy. To achieve secure interaction, utilize the postMessage API as an alternative method.
Parent page:
document.getElementById("myiframe").contentWindow.postMessage("Hello!", "*");
iframe page:
window.addEventListener("message", (event) => {
console.log("Message from parent:", event.data);
});
This technique is commonly used in various applications, such as integrating payment forms and widgets.
Conclusion
HTML embedded iframes are a powerful and valuable tool. They serve the purpose of incorporating external elements such as web pages, videos, and widgets into a webpage. Despite their convenience and adaptability, modern standards emphasize the importance of responsiveness, security, and accessibility when utilizing iframes. Features like Sandboxing, srcdoc, postMessage, and responsive CSS play a crucial role in enhancing the safety and flexibility of iframes in contemporary web development. By adhering to recommended methods, developers can ensure that iframes enhance user interaction without compromising performance or security.