Iframe Embed Code Generator
Generate an iframe with a responsive wrapper, lazy loading, a title for screen readers, and the sandbox and permission attributes that matter.
<style>
.embed-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.embed-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="embed-frame">
<iframe
src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
title="Product tour video"
loading="lazy"
allow="autoplay; picture-in-picture"
allowfullscreen
referrerpolicy="strict-origin-when-cross-origin"
></iframe>
</div>
Output is valid and updates as you type.
Fix the highlighted fields to update the output.
Generate an iframe that scales with its container, loads only when it is needed, announces itself to screen readers, and grants the framed site only what it asks for.
How to use
- Use an HTTPS URL. A plain HTTP frame inside an HTTPS page is blocked as mixed content, and the embed simply does not appear.
- Write a real title. Screen readers announce an iframe by its title; without one the user hears “frame” and nothing else.
- Pick a responsive ratio unless the embed has a fixed size it must keep.
aspect-ratiohandles this in two lines now, with no padding-top trick. - Lazy load anything below the fold. An embedded video that nobody scrolls to costs nothing.
- Grant the narrowest
allowlist that works. Each entry hands a capability to someone else’s page.
Example
<div class="embed-frame">
<iframe
src="https://www.youtube-nocookie.com/embed/VIDEO_ID"
title="Product tour video"
loading="lazy"
allow="autoplay; picture-in-picture"
allowfullscreen
referrerpolicy="strict-origin-when-cross-origin"
></iframe>
</div>youtube-nocookie.com is YouTube’s own privacy-preserving host: the same player, without the tracking cookie set until the video is played.
Pitfalls
- An iframe with no
titleis announced as “frame” by screen readers, which is one of the most common accessibility failures on marketing pages. sandbox="allow-scripts allow-same-origin"on a frame from your own origin removes the sandbox entirely: the framed page can reach out and remove its own restrictions.sandbox=""blocks scripts, forms, popups and navigation. Most real embeds need at leastallow-scripts.loading="lazy"on an iframe above the fold delays something the visitor is already looking at.- The
allowattribute is a permissions policy, not a suggestion. Grantingcameraorgeolocationto an embed hands that capability to the other site. - An iframe blocks nothing by default: the framed site can run scripts, set cookies and navigate the top window unless you sandbox it.
- Fixed
widthandheightattributes overflow on a phone. The responsive wrapper exists for that. - Third-party embeds pull in their own scripts and cookies. A cookie banner that claims no third-party cookies while an embed sets them is a compliance problem, not a technical one.
Compatibility
loading="lazy" on iframes is supported in Chrome, Edge, Firefox and Safari 16.4 and later; older Safari loads eagerly, which is the previous behaviour rather than a break. aspect-ratio is supported by every current browser. allow needs a browser with Permissions Policy, which is all Chromium browsers, Firefox and Safari. sandbox and referrerpolicy are universal. The tool runs entirely in your browser.
Frequently asked questions
Why is my embed not showing?
X-Frame-Options or a frame-ancestors policy that refuses to be framed. Neither is something you can fix from this side.How do I make it responsive?
aspect-ratio on the wrapper, which is what the generated CSS does. The old padding-top trick is no longer needed.Is sandbox worth using?
allow-scripts and add back only what breaks.Should I lazy load?
What about YouTube privacy?
youtube-nocookie.com. It serves the same player and holds off the tracking cookie until playback starts.