HTML iFrame Generator
Configure an iframe — src, sizing, sandbox, loading, and policy attributes — and copy the ready-to-use HTML with a live preview.
Last updated: May 25, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is HTML iFrame Generator?
The HTML `<iframe>` element embeds another HTML document inside the current page. It is commonly used to embed videos (YouTube, Vimeo), maps (Google Maps, OpenStreetMap), forms (Google Forms, Typeform), payment widgets, third-party calculators, and live previews.
A modern iframe should include a meaningful `title` (screen-reader users rely on it to understand the embedded content), an explicit `width` and `height` (or be sized via CSS), and — when embedding untrusted content — a `sandbox` attribute that restricts what scripts inside the frame can do. Performance attributes like `loading="lazy"` defer offscreen iframes until they're near the viewport. The `allow` attribute opts in to specific browser features (fullscreen, autoplay, camera, microphone) that the embedded document can request.
This generator builds the markup from a form and previews it live in your browser. The preview honours the same attributes that go into the generated tag, so you can quickly verify sandbox restrictions, sizing, and feature-policy tokens before pasting the snippet into your site.
How to Use HTML iFrame Generator
Paste the embed URL into the src field.
Add a meaningful title for accessibility (required by HTML and screen readers).
Set width and height in pixels, or leave blank to size with CSS.
Pick a loading mode (lazy is recommended for offscreen iframes).
Choose a sandbox preset — Strict drops all permissions, Permissive opts in to a sensible default set, or use Custom tokens for fine-grained control.
Add allow feature-policy tokens if the embedded content needs autoplay, fullscreen, camera, microphone, payment, etc.
Copy the generated HTML and paste it into your site.
Common Use Cases
- Embedding a YouTube or Vimeo video with lazy loading and an accessible title.
- Adding a Google Maps embed sized for a responsive layout.
- Embedding a third-party form (Google Forms, Typeform) inside a contact page.
- Sandboxing a third-party widget so its scripts cannot access cookies or the parent page.
- Building a CodePen / JSFiddle preview pane inside a tutorial.
- Testing different sandbox and referrer-policy combinations against a target URL.
Example Input and Output
A responsive, lazy-loaded YouTube embed with an accessible title and a strict sandbox that still allows the YouTube player to run.
src: https://www.youtube.com/embed/dQw4w9WgXcQ
title: Never Gonna Give You Up — YouTube
width: 560
height: 315
loading: lazy
allow: accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture
allowfullscreen: yes
sandbox: allow-scripts allow-same-origin allow-presentation<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"
title="Never Gonna Give You Up — YouTube"
width="560"
height="315"
loading="lazy"
allowfullscreen
sandbox="allow-scripts allow-same-origin allow-presentation"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
frameborder="0"></iframe>Privacy
The generator runs entirely in your browser. Only the live preview makes a network request — to the URL you paste — exactly as a real page embedding the iframe would.
Sandbox is opt-in
Adding sandbox="" (no tokens) is the strictest setting — no scripts, no forms, no popups, treated as a unique origin. Each token you add re-enables one capability.
frameborder is deprecated
frameborder="0" is a legacy attribute but still useful for older email clients and CMS rich-text editors. Modern projects should use CSS (border: 0) instead.