Iframes In Depth
A closer look at embedding other pages — attributes, sizing and security.
What you will learn
- Control iframe size and behaviour
- Understand sandboxing and security
- Use iframes responsibly
Iframe attributes
| Attribute | Purpose |
|---|---|
src | The page to embed |
width / height | Size of the frame |
title | Describes the content (accessibility) |
allowfullscreen | Allow full-screen (videos) |
loading="lazy" | Load only when scrolled into view (faster pages) |
<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=77.5,12.9,77.7,13.0"
width="100%" height="200" title="Map of Bengaluru" loading="lazy"></iframe>This single <iframe> embeds a live OpenStreetMap page: src is the map address (the numbers pick the area), width="100%" makes it fill the available width, height="200" sets its height, title describes it for screen readers, and loading="lazy" delays loading it until the user scrolls near it — keeping the rest of the page fast.
Note: Output: A full-width, 200px-tall interactive map of Bengaluru embedded in the page; it only loads once it is about to come into view.
Watch out: An iframe runs another site inside yours. Only embed trusted sources, and never put sensitive content where a malicious embedded page could read it.
Note: You can target an iframe from a link with the name attribute — older sites used this for navigation. Today, prefer normal page links and components.
Q. Which attribute delays loading an iframe until it is scrolled into view?
✍️ Practice
- Embed a map with
loading="lazy"and a descriptivetitle. - Try embedding a site that blocks framing and observe what happens.
🏠 Homework
- Build a “resources” page that embeds two trusted external widgets.