HTML Iframes
An <iframe> embeds another HTML document inside the current page. It's how you embed YouTube videos, Google Maps, or any third-party widget.
Core attributes
| Attribute | Purpose |
|---|---|
src | URL of the page to embed. |
srcdoc | Inline HTML to render instead of a URL. |
width / height | Iframe size in pixels. |
title | Required for accessibility — describes the embedded content. |
loading="lazy" | Defer loading until the iframe is near the viewport. |
allow | List of permissions (e.g. allow="autoplay; fullscreen"). |
Sandboxing
The sandbox attribute restricts what the embedded page can do. Without any value, almost everything is blocked; you opt features back in by adding tokens:
| Token | Allows |
|---|---|
allow-scripts | JavaScript to run. |
allow-forms | Form submission. |
allow-same-origin | Same-origin access to cookies and storage. |
allow-popups | Open new windows. |
Security note: Treat any iframe content from a third party as untrusted. Sandbox it, and never combine
allow-scripts with allow-same-origin unless you fully trust the source.Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<h1>HTML Iframes</h1>
<p>This is a demo page for the "HTML Iframes" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Embed another page inside this iframe.
<iframe
="/preview.html" width="600" height="400"></iframe>
Same attribute as <img> uses for its file.
Discussion
Loading…