iframe embed code generator with title, sandbox and responsive sizing

How to use the iframe generator

1. Paste the Embed URL.
2. Write a Title (required for accessibility) that describes the content.
3. Set Width and Height in pixels, or choose a Responsive wrapper: 16:9, 4:3 or 1:1.
4. Choose loading="lazy" and Allow fullscreen, and add an allow (permissions policy) list if the provider asks for one, such as autoplay; encrypted-media; picture-in-picture.
5. Keep Sandbox the frame ticked and tick only the permissions the embed needs. Pick a Referrer policy.
6. Copy the code and read the notes.

What it does and when to use it

An iframe shows another web page inside yours: a map, a video, a booking widget, a form or a code demo. Copy-paste embed codes from providers often lack a title, load immediately even when the frame is far down the page, and give the framed page more freedom than it needs. This generator builds the code with sensible defaults: lazy loading, no border, a sandbox, and strict-origin-when-cross-origin, which sends the other site only your domain, not the full page address.

For your own video and audio files, the native players are lighter than any embed. Use the HTML Video Tag Generator or the HTML Audio Tag Generator. To start a complete page around the embed, use the HTML Boilerplate Generator.

How it works

Attributes are written in this order: src, title, size or responsive style, loading, allowfullscreen, allow, sandbox, referrerpolicy. With a responsive ratio, the iframe gets width: 100%; height: 100% and sits inside a div with CSS aspect-ratio. With the sandbox ticked but no permissions, the tool writes an empty sandbox="", the strictest setting. URLs are HTML-escaped, so & in a query string becomes &, as HTML requires. There is no live preview, because many sites block framing; the code is built in your browser.

Worked examples

The default map embed:

<iframe src="https://www.openstreetmap.org/export/embed.html?bbox=77.58,12.96,77.62,12.99&amp;layer=mapnik" title="Map of our Bengaluru office" width="640" height="360" style="border: 0;" loading="lazy" sandbox="allow-scripts allow-same-origin" referrerpolicy="strict-origin-when-cross-origin"></iframe>

A responsive video with a 16:9 wrapper, fullscreen and an allow list, sandbox off:

<div style="aspect-ratio: 16/9; max-width: 100%;">
  <iframe src="https://www.youtube-nocookie.com/embed/VIDEO_ID" title="Product tour video" style="width: 100%; height: 100%; border: 0;" loading="lazy" allowfullscreen allow="autoplay; encrypted-media; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin"></iframe>
</div>

No title. Clearing the title and choosing scripts and forms only gives sandbox="allow-scripts allow-forms" and the warning “Add a title: screen readers announce it to describe the frame.”

Limits and tips

• Every iframe loads a full page with its own scripts. Use few of them, and keep lazy loading on for frames below the first screen.
• If an embed breaks with the sandbox on, add one permission at a time to find the one it needs.