Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we include an inline sub window in HTML?
An inline sub window in HTML is created using the <iframe> (inline frame) tag. An iframe allows you to embed another HTML document or webpage directly within the current page, creating a window-like container that displays external content seamlessly.
The iframe element is commonly used to embed videos, maps, social media content, advertisements, or entire web pages from the same or different domains. It acts as a separate browsing context within the main document.
Syntax
Following is the basic syntax for creating an inline sub window using the iframe tag −
<iframe src="URL" width="value" height="value"></iframe>
The src attribute specifies the URL of the page to embed, while width and height define the dimensions of the iframe.
Iframe Attributes
The HTML <iframe> tag supports the following attributes −
| Attribute | Value | Description |
|---|---|---|
| src | URL | Specifies the URL of the document to embed in the iframe. |
| width | pixels or % | Specifies the width of the iframe. |
| height | pixels or % | Specifies the height of the iframe. |
| name | text | Specifies the name of the iframe for targeting. |
| frameborder | 1 or 0 | Specifies whether to display a border around the iframe (deprecated in HTML5). |
| scrolling | yes, no, auto | Specifies whether scrollbars should appear (deprecated in HTML5). |
| sandbox | allow-forms, allow-scripts, allow-same-origin, etc. | Applies security restrictions to the iframe content. |
| srcdoc | HTML code | Specifies HTML content to display instead of a URL. |
| loading | eager, lazy | Specifies when the iframe should be loaded. |
Basic Iframe Example
Following example demonstrates how to create a simple inline sub window −
<!DOCTYPE html>
<html>
<head>
<title>Basic Iframe Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Embedded Webpage</h2>
<iframe src="https://www.example.com"
width="600"
height="400"
style="border: 2px solid #ccc;">
Your browser does not support iframes.
</iframe>
</body>
</html>
This creates a 600x400 pixel iframe with a gray border that loads example.com. The text inside the iframe tags serves as fallback content for browsers that don't support iframes.
Responsive Iframe
Following example shows how to create a responsive iframe that adjusts to different screen sizes −
<!DOCTYPE html>
<html>
<head>
<title>Responsive Iframe</title>
<style>
.iframe-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Responsive Video Iframe</h2>
<div class="iframe-container">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>
</div>
</body>
</html>
This technique uses CSS to create a responsive container that maintains a 16:9 aspect ratio, commonly used for embedding videos.
Iframe with HTML Content
Using the srcdoc attribute, you can embed HTML content directly instead of loading an external URL −
<!DOCTYPE html>
<html>
<head>
<title>Iframe with HTML Content</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Inline HTML Content</h2>
<iframe srcdoc="<h1 style='color: blue; text-align: center;'>Hello from iframe!</h1>
<p style='text-align: center;'>This content is embedded directly.</p>"
width="400"
height="150"
style="border: 1px solid #999;">
</iframe>
</body>
</html>
The output displays the embedded HTML content directly within the iframe −
Hello from iframe! (blue, centered heading) This content is embedded directly. (centered paragraph)
Iframe Security with Sandbox
The sandbox attribute provides security by restricting what the iframe can do −
<!DOCTYPE html>
<html>
<head>
<title>Sandboxed Iframe</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Sandboxed Content</h2>
<iframe src="https://example.com"
width="500"
height="300"
sandbox="allow-same-origin allow-scripts"
style="border: 1px solid #333;">
</iframe>
<p>This iframe is sandboxed with limited permissions.</p>
</body>
</html>
Common sandbox values include allow-forms, allow-scripts, allow-same-origin, and allow-top-navigation. An empty sandbox value sandbox="" applies the most restrictive settings.
Common Use Cases
Iframes are commonly used for the following purposes −
-
Embedding videos − YouTube, Vimeo, and other video platforms provide iframe embed codes.
-
Maps integration − Google Maps and other mapping services use iframes for embedding interactive maps.
-
Social media content − Twitter tweets, Facebook posts, and Instagram photos can be embedded using iframes.
-
Payment gateways − Secure payment forms from third-party providers are often loaded in iframes.
-
Advertisements − Ad networks frequently deliver ads through iframes for security and isolation.
Conclusion
The <iframe> tag is the standard way to create inline sub windows in HTML. It provides a secure method to embed external content while maintaining isolation between the main document and the embedded content. Use appropriate attributes like sandbox for security and responsive CSS techniques for modern web design.
567 Views
