Paste the address you want to embed, give the frame a title, choose a responsive shape or a fixed size, and this generator writes the iframe tag with lazy loading, sandbox tokens, permissions and a referrer policy. The preview below loads your address so you can confirm the site actually allows framing before you paste the code.
| Option | Attribute or style | Default in this tool |
|---|---|---|
| Title | title="..." | Required, used by screen readers |
| Responsive shape | style="width:100%;aspect-ratio:16 / 9" | 16:9 |
| Fixed size | width and height | Browser default is 300 by 150 |
| Lazy loading | loading="lazy" | On |
| Sandbox | sandbox="..." | Off; tick tokens to restrict |
| Permissions | allow="fullscreen; ..." | fullscreen only |
| Referrer | referrerpolicy="..." | strict-origin-when-cross-origin |
Updated
Most iframe snippets online are missing at least one of the things a modern embed needs: a title for assistive technology, lazy loading so it does not slow the first screen, a responsive size, and the smallest set of permissions. This tool writes all of them for any address. For video, maps and booking pages from known providers, our embed code generator also converts their share links into embed links.
Address to embed (https): https://example.com/
Title (describe the content): Example Domain page
Size: Responsive, Aspect ratio 16 / 9
Lazy load (loading="lazy")
Sandbox the content
Permissions (allow): fullscreen, autoplay, picture-in-picture, clipboard-write, encrypted-media, geolocation, camera, microphone
Referrer policy: strict-origin-when-cross-origin
Your code
<iframe
src="https://example.com/"
title="Example Domain page"
style="width:100%;aspect-ratio:16 / 9;border:0"
loading="lazy"
allow="fullscreen"
referrerpolicy="strict-origin-when-cross-origin"
></iframe>The preview loads the address in your browser. A grey error box means that site refuses to be framed.
Resize the window and the frame keeps its shape. The inner page here comes from srcdoc so the example works offline.
<iframe
title="Sample embedded card"
srcdoc="<p style='font:16px system-ui;padding:12px'>I keep a 16 by 9 shape at any width.</p>"
style="width:100%;aspect-ratio:16 / 9;border:1px solid #cbd5e1;border-radius:12px"
loading="lazy"></iframe>Nothing from the other site loads until the button is pressed. The template tag holds the real iframe.
<div class="embed" style="aspect-ratio:16 / 9;display:grid;place-items:center;background:#e2e8f0">
<button type="button" onclick="this.parentElement.replaceChildren(this.nextElementSibling.content.cloneNode(true))">
Load the map
</button>
<template>
<iframe src="https://example.com/embed" title="Map to our office"
style="width:100%;height:100%;border:0" loading="lazy"></iframe>
</template>
</div>Title, size, loading, permissions, sandbox, referrer: six decisions, and the generator makes each one explicit. The defaults here are the safe ones: lazy, responsive, a referrer policy that sends only the origin across sites, and no extra permissions beyond fullscreen.
After pasting the code, test it on a phone width. A frame with a fixed pixel width is the most common cause of sideways scrolling on mobile.
A grey error box means the embedded site sent a framing header. A blank white frame often means the site needs scripts or forms that a sandbox token you ticked is blocking: untick sandbox and try again to tell the two apart.
Some sites also detect being framed and show a different page. That behaviour is theirs to decide and cannot be changed from the outside.
Every iframe is a full page from another site, with its own scripts and possibly its own cookies. Mention embedded third-party content in your privacy notice and prefer privacy-friendly embed modes where the provider offers them.
If an embed is large and optional, consider a click-to-load placeholder: show an image and a button, and insert the iframe only when someone asks for it.
Give it width: 100% and an aspect-ratio such as 16 / 9, and leave the height automatic. The browser then keeps the shape at every width. The older padding-top wrapper trick is no longer needed now that aspect-ratio is widely supported.
It defers loading until the frame gets close to the visible part of the page. eager, which loads straight away, is the default. Lazy loading saves data and speeds up the first view for frames further down.
Screen reader users move between frames by their titles. A clear title, such as "Booking calendar for the Leeds studio", tells them what is inside before they enter it.
Only the features the embed needs, separated by semicolons, for example allow="fullscreen; picture-in-picture". Listing a feature without an origin allows it for the origin in src. allow can only narrow what the page's own Permissions-Policy header permits, never widen it.
No data goes to us. The code is built in this page. The preview is an ordinary iframe in your browser, so the embedded site receives a normal visit from you, the same as when your visitors load it.
Related: Embed code generator for video, maps and forms, Fix iframe refused to connect, iframe sandbox tokens, HTML iframe and video guide.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.