Iframes - INCS

An <iframe> (inline frame) embeds another webpage inside your own. It’s how YouTube videos, Google Maps, and third-party widgets appear within a page without any of their code living in your HTML.

Concept 1 — Basic syntax

The <iframe> tag requires a src attribute pointing to the URL you want to embed. Always include title — screen readers announce it to describe what’s inside the frame.

<iframe
  src="https://example.com"
  title="Example website"
  width="800"
  height="450">
</iframe>

Unlike images, <iframe> is not self-closing. Any content between the tags is fallback text shown in browsers that don’t support iframes (extremely rare today, but good practice).

<iframe src="https://example.com" title="Example">
  Your browser does not support iframes.
</iframe>

Concept 2 — Common attributes

<iframe
  src="https://example.com"
  title="Example"
  width="100%"
  height="500"
  loading="lazy"
  allowfullscreen>
</iframe>

Attribute	Purpose
`src="..."`	URL of the page to embed
`title="..."`	Accessible description (required)
`width` / `height`	Dimensions in pixels or percentage
`loading="lazy"`	Defer loading until the iframe is near the viewport
`allowfullscreen`	Permit fullscreen mode (needed for video players)
`frameborder="0"`	Remove the default border (now handled by CSS, but common in embed codes)

Concept 3 — Embedding YouTube and Google Maps

Most platforms provide ready-made embed codes. You rarely write iframe attributes from scratch — you copy the embed snippet and paste it in.

YouTube:

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Video title"
  allowfullscreen
  loading="lazy">
</iframe>

Replace VIDEO_ID with the ID from the video URL (e.g. dQw4w9WgXcQ from youtube.com/watch?v=dQw4w9WgXcQ).

Google Maps:

<iframe
  src="https://www.google.com/maps/embed?pb=EMBED_CODE"
  title="Our location on Google Maps"
  width="600"
  height="450"
  loading="lazy"
  allowfullscreen>
</iframe>

Get the embed code from Google Maps by clicking Share → Embed a map.

Concept 4 — Security with sandbox

The sandbox attribute restricts what the embedded page can do. By default it blocks scripts, form submission, and popups. You can selectively re-enable features you trust.

<!-- Maximum restriction -->
<iframe src="https://example.com" title="Sandboxed" sandbox></iframe>

<!-- Allow scripts but nothing else -->
<iframe src="https://example.com" title="Sandboxed" sandbox="allow-scripts"></iframe>

<!-- Allow scripts and form submission -->
<iframe src="https://example.com" title="Sandboxed" sandbox="allow-scripts allow-forms"></iframe>

Sandbox value	What it permits
`allow-scripts`	JavaScript execution
`allow-forms`	Form submission
`allow-same-origin`	Treat content as same origin
`allow-popups`	Links that open new windows
`allow-top-navigation`	Links that navigate the parent page

Rule: always use sandbox when embedding untrusted third-party content. For trusted platforms like YouTube or Google Maps it’s not necessary, but for user-generated or unknown content it’s an important layer of protection.

Concept 5 — Limitations and when not to use iframes

Not every site can be embedded. Many set an HTTP header called X-Frame-Options or Content-Security-Policy that blocks them from appearing in iframes. If you try to embed such a site, the iframe shows blank or an error — there’s nothing you can do on your end.

Also avoid iframes when:

The content is your own — link to it or include it directly instead.
SEO matters — search engines don’t index iframe content as part of your page.
Performance is a concern — each iframe loads a full separate page, including its own scripts and styles.

Try it yourself

<body>
  <h1>Embedded content</h1>

  <h2>A YouTube video</h2>
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Sample YouTube video"
    allowfullscreen
    loading="lazy">
  </iframe>

  <h2>A sandboxed page</h2>
  <iframe
    src="https://example.com"
    title="Example domain"
    width="100%"
    height="300"
    sandbox="allow-scripts"
    loading="lazy">
  </iframe>
</body>

Quick reference

Attribute	Purpose
`src="..."`	URL to embed
`title="..."`	Accessible label (required)
`width` / `height`	Frame dimensions
`allowfullscreen`	Enable fullscreen mode
`loading="lazy"`	Defer loading for performance
`sandbox`	Restrict iframe permissions
`frameborder="0"`	Remove border (legacy, use CSS)