HTML Iframes
Learn how to embed other web pages within your HTML document
🖼️ What are HTML Iframes?
An iframe (inline frame) is used to embed another HTML document within the current document. It creates a window to display content from another source.
<iframe src="https://example.com"
width="400"
height="300">
</iframe>Output:
Embedded Website Content
Key Iframe Concepts
Embed Pages
Display external websites
<iframe src="https://google.com"></iframe>Media Content
Embed videos and maps
<iframe src="video.html"></iframe>Customizable Size
Set width and height
<iframe width="500" height="300"></iframe>Security
Sandboxed environment
<iframe sandbox></iframe>🔹 Basic Iframe Usage
Here's how to create basic iframes:
<!-- Simple iframe -->
<iframe src="page.html"></iframe>
<!-- Iframe with size -->
<iframe src="content.html"
width="600"
height="400">
</iframe>
<!-- Iframe with title -->
<iframe src="map.html"
title="Interactive Map">
</iframe>Output:
Simple Iframe
Sized Iframe (600x400)
Interactive Map
🔹 Iframe Attributes
Common iframe attributes and their uses:
<iframe
src="content.html"
width="500"
height="300"
title="Embedded Content"
frameborder="0"
allowfullscreen
loading="lazy">
Your browser does not support iframes.
</iframe>Attributes Explained:
- src: URL of the page to embed
- width/height: Size of the iframe
- title: Accessibility description
- frameborder: Border around iframe (0 = no border)
- allowfullscreen: Allow fullscreen mode
- loading: Lazy loading for performance
🔹 Responsive Iframes
Make iframes responsive with CSS:
<!-- HTML -->
<div class="iframe-container">
<iframe src="video.html"></iframe>
</div>
<!-- CSS -->
<style>
.iframe-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 ratio */
}
.iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>Output:
Responsive Iframe (16:9 ratio)