IframeTester

Iframe Embed Generator

Create responsive iframe HTML, preview it, and copy your embed code.

Responsive iframe generatorLive code preview

Preview connects to the destination. Use a URL you trust.

Advanced options

Loading a preview connects to the destination. Use a URL you trust. Permission changes reload an open preview.

Generated iframe HTML

<iframe
    src="https://example.com/"
    title="Embedded content"
    style="border:0;display:block;width:100%;aspect-ratio:16 / 9;height:auto;"
    loading="lazy"
    referrerpolicy="strict-origin-when-cross-origin"
    allow="fullscreen"
    allowfullscreen
  ></iframe>
Better defaults

Generate iframe code that is easier to ship

An iframe generator is most useful when it does more than print <iframe src="...">. The generated markup on this page includes an accessible title, a responsive width, a referrer policy and explicit loading behavior. You can add sandbox restrictions or fullscreen only when the embedded experience needs them.

Start with the destination's official embed URL

Many providers expose a dedicated embed endpoint rather than allowing their normal website pages to be framed. Maps, video players and dashboards often use a special URL format. If a service documents an embed URL, use that instead of assuming its public website can be loaded directly.

Use sandbox deliberately

The sandbox attribute starts from a restrictive environment and restores capabilities with tokens. It can be valuable for untrusted or semi-trusted content, but it should not be copied mechanically. Test the exact permissions the embed needs with the iframe sandbox tester.

Test the generated iframe

Generated markup cannot grant permission that the destination has denied. Run the URL through the iframe tester or the dedicated framing-header checker before publishing.

Technical references

Responsive iframe sizing: video versus a whole webpage

For a video or another fixed-ratio embed, enable responsive sizing and choose its aspect ratio, such as 16 / 9. For a webpage, form or dashboard, a ratio may leave too little vertical space; use a fixed height with full-width sizing and inspect the preview on a narrow screen.

Responsive width does not automatically match a cross-origin document's content height. An automatic-height integration usually needs cooperation from the embedded page, such as validated postMessage communication. This generator does not supply that integration.

Before you copy the HTML

  1. Use the provider's supported HTTPS embed URL.
  2. Replace the generic title with a description of the actual content.
  3. Review fullscreen, loading, referrer and sandbox options.
  4. Copy the code into your page, then test the published layout and destination headers.
FAQ

Common questions

How do I create responsive iframe code?

Use width=100% so the frame follows its container, then choose a sensible fixed height or place the iframe inside a responsive aspect-ratio wrapper when the content has a predictable ratio.

What should I put in the iframe title attribute?

Describe the purpose of the embedded content, for example 'Store location map' or 'Product demo video'. Avoid titles such as 'iframe' that do not help users understand the frame.

Does generating iframe code guarantee the website can be embedded?

No. The destination can still block framing through X-Frame-Options, CSP frame-ancestors, authentication or other browser behavior. Test the URL separately before relying on the embed.

Keep testing

Related tools and guides

Embed Code TesterPaste existing code and inspect the iframe attributes.Open →Sandbox TesterChoose the narrowest sandbox permissions that still work.Open →Iframe TesterCheck whether the generated iframe destination can actually be framed.Open →