Iframe Generator

What is an iframe?

An <iframe> (inline frame) displays another web page inside yours. It is how YouTube and Vimeo players, Google Maps, booking widgets, forms, dashboards and many third-party tools are embedded. The embedded page runs in its own browsing context, so its scripts and styles do not mix with your site.

Getting an iframe right takes more than a src. It needs a title so screen-reader users know what it contains, a responsive size so it does not overflow on phones, loading="lazy" so it does not slow the initial page load, and — for anything you do not fully trust — a sandbox and a minimal allow list that limit what the embedded page can do. This generator sets all of that and writes the code for you.

Paste a normal YouTube or Vimeo link and it is converted to the correct player URL automatically, including Shorts, youtu.be links, playlists, start times and unlisted Vimeo hashes. For Google Maps, use the embed URL from Share → Embed a map; ordinary Maps links refuse to load in frames.

How to use the Iframe Generator

1. Paste the URL — a YouTube or Vimeo link, a Google Maps embed URL, any https:// page, or a complete <iframe> snippet to clean up.
2. Enter a descriptive title, then choose a responsive aspect ratio (16:9, 4:3, 1:1, 9:16 or 21:9) or a fixed width and height.
3. Set video options, lazy loading, fullscreen, permissions, sandbox tokens and referrer policy as needed.
4. Click Load preview to test it, then copy the HTML (and the CSS for the responsive wrapper) into your page.

Example

A responsive, privacy-enhanced YouTube embed using the CSS aspect-ratio property:

<div class="responsive-embed">
  <iframe src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ?start=30" title="Big Buck Bunny short film" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" loading="lazy" allowfullscreen></iframe>
</div>

.responsive-embed { aspect-ratio: 16 / 9; max-width: 100%; }
.responsive-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

Iframe security in practice

• sandbox with no value blocks scripts, forms, pop-ups and same-origin access. Add tokens one by one, e.g. allow-scripts allow-same-origin for a video player.
• Never give a page from your own domain both allow-scripts and allow-same-origin: it could remove its own sandbox.
• allow (Permissions Policy) controls powerful features like camera, microphone, geolocation and autoplay. Grant only what the embed needs.
• referrerpolicy decides how much of your page URL is sent to the embedded site. strict-origin-when-cross-origin sends only your domain and is what YouTube recommends — it needs that to verify embeds.
• If a page will not load in a frame, it sends X-Frame-Options or a CSP frame-ancestors rule. That is a deliberate choice by the site owner and cannot be bypassed from your side.