HTML Iframes
What is an Iframe?
An <iframe> (inline frame) embeds another HTML page inside the current page. Common uses include embedding maps, videos, social media widgets, and external content.
Basic Iframe
<!-- Basic iframe -->
<iframe src="https://www.example.com" width="600" height="400"></iframe>
<!-- Embed a local page -->
<iframe src="about.html" width="100%" height="300"></iframe>
<!-- Embed a YouTube video -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope"
allowfullscreen>
</iframe>
<!-- Embed Google Maps -->
<iframe
src="https://www.google.com/maps/embed?pb=..."
width="600"
height="450"
style="border:0;"
allowfullscreen
loading="lazy">
</iframe>
<!-- Responsive iframe (CSS trick) -->
<div style="position:relative; padding-bottom:56.25%; height:0; overflow:hidden;">
<iframe
src="https://www.youtube.com/embed/VIDEO_ID"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0" allowfullscreen>
</iframe>
</div>
Iframe Attributes
| Attribute | Description |
|---|---|
src | URL of the page to embed |
width | Width in pixels or percentage |
height | Height in pixels |
title | Accessible description (required for screen readers) |
frameborder | 0 removes the border (deprecated — use CSS instead) |
allowfullscreen | Allows the iframe to go fullscreen |
loading="lazy" | Defers loading until iframe is near viewport |
sandbox | Restricts iframe capabilities for security |