DevKit Tools

iframe Generator

Generate iframe markup with title, dimensions, lazy loading, sandbox and allowfullscreen.

Media/iframe

Embed markup with sandbox and lazy loading - safer defaults than a bare iframe.

Preview (embed shown as placeholder)

iframe embed
<iframe src="https://example.com" title="Embedded page" width="100%" height="400" loading="lazy" allowfullscreen></iframe>

About the iframe generator

An iframe embeds another document, which means you are running someone else's page inside yours. The sandbox attribute restricts what it can do, and a title attribute is required for screen readers to describe what the frame contains.

loading="lazy" matters more here than for images, since an embed can pull in a whole second page worth of requests.

How to use it

  1. 1Set the source URL.
  2. 2Write a title describing the embedded content.
  3. 3Set width and height.
  4. 4Enable sandbox for untrusted content.
  5. 5Copy the HTML.

Questions

Why does an iframe need a title?

Screen readers announce it so users know what the frame contains. Without one they hear only "frame", which is useless.

What does sandbox do?

It removes capabilities from the embedded page: scripts, forms, popups and same-origin access. You then add back only what is needed.

Why is my iframe blocked?

The target site sends X-Frame-Options or a frame-ancestors policy that forbids embedding. That is the site's choice and cannot be overridden.

More HTML tools