HTML Iframe Generator
Build clean, accessible <iframe> tags in seconds. Configure sandbox restrictions, referrer policies, lazy loading, and Permissions Policy — all with a live code preview and one-click copy.
10+
Attributes
Clean
HTML Output
Local
Privacy
Free
Forever
Sandbox Security Controls
Toggle allow-scripts, allow-forms, allow-same-origin, and more to lock down embedded content with minimal effort.
Lazy Loading Support
Defer iframe loading until it enters the viewport to boost page performance and reduce initial load time.
Accessibility First
The title attribute field is prominently featured — WCAG-compliant iframes are only one field away.
Configure Your Iframe
Fill in the fields below. The code updates as you type.
class="token-tag"><iframe width="600" height="400" class="token-tag">>class="token-tag"></iframeclass="token-tag">>
Quick Tips
- • Always set a descriptive title for screen reader support.
- • Use sandbox to restrict permissions on untrusted content.
- • Add loading="lazy" for iframes below the fold.
- • Use width="100%" with CSS
aspect-ratiofor responsive iframes.
What Is an HTML Iframe?
An HTML <iframe> — short for inline frame — is an element that embeds one HTML document inside another. It creates a fully independent browsing context within the parent page: the embedded document has its own session history, its own Document Object Model, and its own JavaScript sandbox. This isolation is one of the most powerful features of the iframe element, allowing web developers to safely incorporate third-party content without it interfering with the parent page's layout, scripts, or styles.
Iframes have been part of the HTML specification since the mid-1990s, originally introduced by Microsoft in Internet Explorer 3 as a way to embed documents within documents. They were later standardised in HTML 4.0 and have since evolved considerably. Modern iframes, as defined in the HTML Living Standard, support powerful attributes like sandbox, referrerpolicy, loading, and allow, which give developers fine-grained control over how embedded content behaves and what resources it can access.
The most fundamental attribute of the iframe is src, which specifies the URL of the page to embed. This can be any URL accessible by the browser, subject to the Content Security Policy of both the parent page and the embedded document. If the embedded page sends a X-Frame-Options: SAMEORIGIN or frame-ancestors 'none' header, the browser will refuse to embed it — which is a deliberate security feature to prevent clickjacking.
Common real-world uses for iframes include embedding YouTube and Vimeo videos, integrating Google Maps, including Stripe or Braintree payment forms, embedding social media widgets like Twitter timelines or Facebook like buttons, hosting third-party chat widgets, displaying PDFs inline, and including sandboxed code execution environments like CodePen or JSFiddle embeds. In all of these cases, the iframe serves as an isolated container that keeps the third-party content's JavaScript, cookies, and DOM structure cleanly separated from your own page.
The width and height attributes accept pixel values (e.g., width="600") or percentage values (e.g., width="100%"). When both are specified in the HTML, they act as fallback dimensions for browsers that cannot compute the size from CSS. Best practice for modern development is to set dimensions via CSS for responsiveness while keeping fallback values in the HTML attributes. For maintaining aspect ratios, the CSS aspect-ratio property combined with width: 100% has largely replaced the older padding-bottom hack.
One frequently overlooked aspect of iframes is their accessibility implications. Screen readers read the content of iframes using the title attribute to identify what the frame contains before reading its contents aloud. Without a meaningful title attribute, users relying on assistive technologies have no way of knowing what the iframe contains without entering it, which can result in a confusing and inaccessible experience. The Web Content Accessibility Guidelines (WCAG) 2.1, Success Criterion 4.1.2 (Name, Role, Value), specifically requires that all user interface components have an accessible name — and for iframes, the title attribute fulfils this requirement.
Iframe Security: Sandbox, Referrer Policy, and CSP
The sandbox Attribute
When you add the sandbox attribute to an iframe, you instruct the browser to apply a set of restrictions to the embedded document. Without any value — sandbox="" — the iframe is fully restricted: JavaScript cannot run, forms cannot be submitted, links cannot open new windows, and the content is treated as a unique, isolated origin. This is the most locked-down configuration.
In practice, you usually need to allow some subset of behaviors. The allow-scripts token re-enables JavaScript execution. The allow-same-origin token lifts the unique-origin restriction, allowing the embedded content to access cookies and storage as if it were from its real origin. Note that combining allow-scripts and allow-same-origin is powerful and must be done deliberately, since together they allow the embedded script to remove the sandbox attribute from the parent's iframe element.
The allow-forms token enables HTML form submissions. The allow-popups token allows the iframe to open new browser windows or tabs. The allow-top-navigation token allows the iframe content to navigate the top-level browsing context — be careful with this one, as it can allow malicious content to redirect your entire page. The allow-downloads token, added in HTML Living Standard, permits file download triggers initiated within the iframe.
Referrer Policy
The referrerpolicy attribute controls the value of the Referer HTTP header sent when the browser fetches the iframe's source. This matters for user privacy: without restriction, the full URL of your page (which may contain sensitive parameters like session tokens, search queries, or user IDs) would be sent to the server hosting the embedded content.
The no-referrer policy is the most private: no Referer header is sent at all. The same-origin policy sends the referrer only when the parent page and the iframe source share the same origin, which is useful for first-party iframes. The strict-origin-when-cross-origin policy is the modern browser default: it sends the full URL for same-origin requests but only the origin for cross-origin ones, and suppresses the header entirely when navigating from HTTPS to HTTP.
Content Security Policy and X-Frame-Options
To prevent your own pages from being embedded in iframes on other sites — a technique used in clickjacking attacks — you should set the Content-Security-Policy: frame-ancestors 'self' response header on your server, or the older X-Frame-Options: SAMEORIGIN header. These are server-side controls: they are set by the embedded page, not by the parent embedding it. The sandbox and referrerpolicy attributes on the iframe element, by contrast, are set by the embedder and restrict what the embedded content can do inside your page.
Why Use This Generator?
Never miss an attribute
All meaningful iframe attributes are presented in the form. You won't accidentally omit the title, forget to set a sandbox policy, or leave in a default referrer policy that leaks URLs.
One-click copy
No need to select text manually. The Copy Code button puts the entire iframe tag onto your clipboard, ready to paste into your HTML editor or CMS.
Syntax highlighting
The code preview uses colour-coded syntax to make attributes and values easy to read and verify before you copy, reducing the chance of configuration mistakes.
Security-aware defaults
The generator uses no-referrer-when-downgrade as the default referrer policy and surfaces sandbox options prominently, nudging developers toward secure configurations.
Fully private
Everything runs in your browser. No URL, no title, no sandbox configuration is ever sent to a server. Your content and configuration stay completely on your device.
Accessibility guidance
The title field is labelled as required for accessibility, helping developers ship WCAG-compliant iframes by default rather than as an afterthought.
How It Works
Configure iframe attributes
Enter the iframe source URL and title. Set width and height (with px or % units). Choose your loading strategy, referrer policy, and sandbox permissions using the checkboxes. Add any optional allow, name, id, class, or style attributes you need.
Preview the generated code
As you change any field, the code preview on the right updates instantly. Attributes with empty values are omitted from the output automatically, and default-value attributes like loading="eager" are also excluded to keep the code clean and minimal.
Copy and paste into your HTML
Click the Copy Code button to copy the complete iframe tag to your clipboard. Paste it directly into any HTML file, template, CMS, or code editor. No reformatting required — the output is ready to use as-is.
Iframe Best Practices
Responsive Iframes with aspect-ratio CSS
Making iframes responsive is a common challenge because, unlike images, they don't scale automatically. The cleanest modern approach uses two CSS properties together. First, set width: 100% so the iframe expands to fill its container. Second, set aspect-ratio: 16 / 9 (or whatever ratio your content requires) so the height is calculated automatically as the width changes.
This eliminates the old padding-bottom percentage hack, which required wrapping the iframe in a positioned div. The aspect-ratio property is supported in all modern browsers since 2021 and is the recommended approach going forward. For content that has a non-standard ratio — like a map or a widget — measure the default width and height and calculate the ratio accordingly, e.g., 400/300 = 4/3.
.responsive-iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: none;
}
Title for Accessibility
The title attribute is the primary mechanism through which assistive technologies identify the purpose of an iframe. It should be concise but descriptive. "Map" is too vague. "Google Map showing FixTools office location in San Francisco" is ideal. If you are embedding a video, include the video title. If you are embedding a payment form, describe it as such.
Screen readers typically announce the title before entering the iframe, letting the user decide whether to navigate into it. Without a title, the reader may fall back to the src URL, which is rarely helpful. Automated accessibility checkers (like axe, WAVE, or Lighthouse) will flag untitled iframes as errors. Making a habit of always setting a title is one of the simplest high-impact accessibility improvements you can make.
Lazy Loading for Performance
Iframes can be expensive to load: they initiate their own network requests, parse their own HTML, and execute their own JavaScript. Adding loading="lazy" defers this work until the iframe is near the viewport, using the browser's IntersectionObserver under the hood. For pages with multiple embedded maps, videos, or widgets, this can dramatically reduce the amount of work the browser does during initial page load, improving Largest Contentful Paint (LCP) and reducing Time to Interactive (TTI). Apply lazy loading to any iframe that is not visible in the initial viewport without scrolling.
Comparison: Manual vs. This Generator vs. Paid Editors
| Feature | Manual Coding | This Generator | Paid HTML Editors |
|---|---|---|---|
| Cost | Free | Free | $10–$50/mo |
| Setup required | None | None | Account + install |
| Sandbox multi-select | Memory required | ✅ Visual checkboxes | Varies |
| Live code preview | Editor only | ✅ Always visible | ✅ Often yes |
| Referrer policy options | Must recall 8 values | ✅ Dropdown | ✅ Often yes |
| Accessibility guidance | Manual awareness | ✅ Title required label | Varies |
| Privacy (no server calls) | ✅ Local | ✅ Local | Varies |
| Syntax highlighting | Editor plugin | ✅ Built-in | ✅ Yes |
Frequently Asked Questions
What is an HTML iframe?
An HTML iframe (inline frame) is an element that embeds another HTML document inside the current document. It creates a nested browsing context, meaning the embedded document has its own session history and its own Document Object Model, completely separate from the parent. Iframes are commonly used to embed maps, videos, widgets, payment forms, and third-party content without needing to load the external page in full. The iframe element has been part of HTML since the early days of the web, and while originally viewed with some suspicion due to security concerns, modern iframe usage with proper sandboxing and referrer policy attributes is considered safe and practical for many real-world applications.
How do I make an iframe responsive?
The traditional approach to responsive iframes uses a wrapper div with a percentage-based padding-bottom to maintain aspect ratio, combined with position:absolute on the iframe itself. For example, padding-bottom:56.25% maintains a 16:9 ratio. The modern, cleaner approach is to use the CSS aspect-ratio property directly on the iframe along with width:100% and height:auto. This eliminates the wrapper hack entirely. You can also use width="100%" directly in the iframe tag, though the height will need to be fixed or managed via CSS. Most developers today rely on aspect-ratio: 16/9 and width: 100% for the simplest responsive solution.
What does the sandbox attribute do?
The sandbox attribute applies a set of extra restrictions to the content in the iframe. When set without a value, or as an empty string, it applies all possible restrictions. You can selectively allow certain behaviors by including specific tokens. allow-scripts lets JavaScript run inside the iframe. allow-same-origin lets the embedded content be treated as coming from the same origin (useful for cookies and storage access). allow-forms permits form submissions. allow-popups allows opening new windows. allow-top-navigation lets the iframe navigate the top-level window. allow-downloads permits file download triggers. Using sandbox dramatically reduces the attack surface of embedded third-party content, and it is considered a security best practice to always include a sandbox attribute with the minimum necessary permissions.
What are the security risks of using iframes?
Iframes introduce several security considerations. Clickjacking is a technique where a malicious site frames your page and tricks users into clicking on invisible elements. You can prevent your own pages from being framed by setting the X-Frame-Options response header or the frame-ancestors Content Security Policy directive. When embedding third-party iframes, the risk is reversed: the embedded content could attempt to break out of the sandbox, exfiltrate data via navigation, or display misleading content. The sandbox and referrerpolicy attributes are your main defenses when embedding external content. Cross-origin iframes are also subject to the same-origin policy, which prevents the parent from reading the iframe DOM or cookies, providing a natural isolation boundary. Always source iframes from trusted domains and use HTTPS.
What is the referrerpolicy attribute on iframes?
The referrerpolicy attribute controls how much referrer information is included when the browser requests the iframe source URL. The default in modern browsers is strict-origin-when-cross-origin, meaning the full URL is sent for same-origin requests but only the origin for cross-origin ones, and nothing is sent when navigating from HTTPS to HTTP. Choosing no-referrer prevents the Referer header from being sent at all, which is the most private option. The no-referrer-when-downgrade policy (which this generator uses as its default) sends the full URL to same-protocol destinations but strips the header when crossing from HTTPS to HTTP. Selecting the right policy helps protect your users privacy and prevents leaking sensitive URL parameters to embedded content providers.
What is the allow attribute used for?
The allow attribute specifies a Permissions Policy (formerly Feature Policy) for the iframe. It controls which browser features the embedded content is allowed to access. Common values include camera, microphone, geolocation, fullscreen, payment, and autoplay. For example, allow="fullscreen" enables the embedded content to go fullscreen. Multiple features are separated by semicolons. This is especially relevant when embedding YouTube or Vimeo videos, which require allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" to function with full features. The Permissions Policy adds a fine-grained layer of control beyond sandbox, targeting specific browser APIs rather than broad scripting or navigation behaviors.
Why is the title attribute required for accessibility?
Screen readers and other assistive technologies use the title attribute to announce what is inside an iframe to users who cannot see the visual content. Without a descriptive title, a screen reader may announce something generic or unhelpful, leaving users who are blind or have low vision without context about the embedded content. The Web Content Accessibility Guidelines (WCAG) require that iframes have a title that describes their purpose. Examples of good titles are "Google Maps showing our office location", "YouTube video: Product overview", or "Stripe payment form". Failing to include a meaningful title is an accessibility violation and can prevent your website from complying with accessibility laws such as Section 508 or the European Accessibility Act.
What does loading="lazy" do on an iframe?
Setting loading="lazy" on an iframe defers its loading until the element is near the viewport, based on the browsers internal threshold. This is a native browser optimization that can significantly reduce initial page load time and save bandwidth for users who never scroll down to see the iframe. It is particularly valuable for pages with multiple iframes or iframes placed below the fold. The alternative, loading="eager" (the default), instructs the browser to load the iframe immediately regardless of its position on the page. Lazy loading iframes is especially beneficial for embedding maps, videos, and widgets that are positioned lower on the page. Browser support is excellent across all modern browsers, making it a safe optimization to apply broadly.
Related Tools
HTML Element Builder
Build any HTML element — links, buttons, headings, and more — with full attribute control.
HTML Form Builder
Generate accessible HTML form elements with labels, validation, and proper structure.
HTML Embed Builder
Generate embed code for videos, audio, images, iframes, and quotes with one tool.
CSS Gradient Generator
Create linear, radial, and conic CSS gradients visually with live preview.