<iframe>
Embeds another page inside the current one: a map, a video, a widget.
Syntax
<iframe src="url" title="description"></iframe>Attributes
| Parameter | Type | Description |
|---|---|---|
| src | URL | The address of the embedded page. |
| srcdoc | HTML | Optional. The HTML of the page right in the attribute. |
| title | text | A description of the content for screen readers. |
| loading | lazy | Optional. Lazy loading. |
| sandbox | list of permissions | Optional. Restricts what the embedded page may do. |
Examples
A page defined right in the attribute:
<iframe
srcdoc="<h1 style='color: teal'>Inside the frame</h1>"
title="Demo frame"
width="300" height="100">
</iframe>An external page with restrictions:
<iframe src="https://example.com" title="Example site"
width="320" height="180" loading="lazy" sandbox></iframe>Notes
Many sites forbid being shown in a frame — then you get an empty area or an error. Always set a title. YouTube videos and maps are embedded exactly this way, with code copied from the service.
See also
- <object>, <embed> — Embed an external file — for example, a PDF — using the browser's own viewer.
- loading — Lazy loading for images and frames that are not yet visible.
- <video> — Embeds a video in the page.
Related recipes
In the tutorial
- Embedding pages: iframe — The iframe tag — embedding another page, a map or a video, size and title, srcdoc, lazy loading and sandbox restrictions.