Free tool

Iframe Embed Code Generator (Responsive, with a Live Tester)

Short answer: An iframe embed code is one HTML tag that shows another page inside yours: an iframe element with the page's address in src and a title for screen readers. Paste a URL below and the generator writes that tag with the size, permissions and sandbox you choose — as plain HTML, a responsive wrapper, a React component and an optional auto-resize script — then loads it in a live tester so you can see whether the site allows itself to be embedded.

Your embed code

Paste where the embed should appear

<iframe
  src="https://example.com/embed"
  title="Embedded content"
  style="width: 100%; height: 600px; border: 0; border-radius: 12px;"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
></iframe>

Live tester

Paste an https:// URL above and the page loads here.

Why the tester can be blank. The embedded site decides whether it may be framed, not you. If it sends an X-Frame-Options header (DENY or SAMEORIGIN) or a Content-Security-Policy with a frame-ancestors rule that doesn't list your domain, the browser refuses to draw it and the frame stays blank or shows an error. No iframe attribute overrides that, and the tester can't detect it either, because a page can't look inside a frame from another origin. Use the site's official embed URL, or ask it to allow your domain.

The tester always runs sandboxed and never passes on camera, microphone, location or payment permission, so a page that needs those can behave differently here than on your site.

How to use it

1
Paste the URL
The address of the exact page to embed, starting with https://. Many products publish a dedicated embed URL, often with /embed in it, that is built to be framed. Use it when it exists.
2
Give it a title
The title is what a screen reader announces when it reaches the frame. Describe the content — "Booking calendar", not "iframe".
3
Size it
A fixed width and height for a box that never changes, or 100% width with a height or an aspect ratio for one that fits any screen. 16:9 suits video; apps and forms usually want a fixed height.
4
Grant only what it needs
Tick the permissions (allow) and the sandbox rights the embedded page actually uses. Anything left unticked is refused.
5
Copy and test
Copy the snippet for your setup and look at the tester. A blank tester usually means the site refuses to be framed — see below.

What each attribute does

src: The page to load. On an https:// site it must be https:// too: browsers block an http:// page inside an https:// one.
title: The frame's accessible name. Screen readers announce it, and accessibility checkers flag an iframe without one (WCAG 4.1.2).
width and height: A fixed size in CSS pixels. Without any size, an iframe is drawn at 300 × 150 pixels.
width: 100% with aspect-ratio or height: The responsive embed: the frame fills its container and keeps its shape (aspect-ratio) or a set height. Use a pixel height for forms and apps, whose content doesn't scale like a video.
loading="lazy": The browser loads the frame only when it nears the screen. Good below the fold; leave it off for an embed at the top of the page.
allow: The frame's Permissions Policy: which powerful features — camera, microphone, fullscreen, clipboard, payment — it may use. A frame from another site gets none of them unless they are listed, and the browser still asks the visitor before turning on a camera or microphone.
allowfullscreen: The older way to allow fullscreen. The generator adds it next to allow="fullscreen" for older browsers; newer ones ignore the duplicate.
sandbox: Starts the frame with nearly every right removed — no scripts, no forms, no popups, a unique origin — and gives back only the tokens you list. An empty sandbox is the strictest setting there is.
allow-scripts with allow-same-origin: Together they let a page from your own origin remove its own sandbox, so the sandbox then protects nothing for same-origin content. A page from another site often needs both, and the same-origin policy still keeps it apart from your page.
referrerpolicy: How much of your page's address the embedded site sees. strict-origin-when-cross-origin, the browser default, sends only your domain. Some embeds check the referrer before they load, so no-referrer can break them.

Why the tester can be blank

The embedded site decides whether it may be framed, not you. If it sends an X-Frame-Options header (DENY or SAMEORIGIN) or a Content-Security-Policy with a frame-ancestors rule that doesn't list your domain, the browser refuses to draw it and the frame stays blank or shows an error. No iframe attribute overrides that, and the tester can't detect it either, because a page can't look inside a frame from another origin. Use the site's official embed URL, or ask it to allow your domain.

Auto-resize: when both pages are yours

A page can't measure a frame from another origin, so the frame keeps whatever height you gave it. If you control the embedded page too, it can report its own height: it posts a message with postMessage to your site's origin, and your page listens, checks that the message came from the embedded origin and from that frame's window, and sets the frame's height. Both checks matter — without them any page could resize your frame or read the height.

When this isn't the right tool

Video and maps from YouTube, Vimeo, Loom or Google Maps. Use the platform's own Share → Embed; it gives you the embed URL and the right parameters. You can paste that embed URL here to make the frame responsive.
A third-party script widget, such as a chat bubble installed with a script tag. That runs JavaScript in your page rather than in a frame, with different trade-offs.
A site that refuses to be framed. No attribute changes that; the site's own headers decide.
Your own content on your own site. A component or an include is simpler, and search engines don't reliably count framed text as part of your page.
A whole feature from another product, with its own sign-in, checkout and revenue split. That is a widget integration rather than a bare iframe: on Ordana a listed widget brings those with it, the host adds it with its own coding agent, and Ordana never reads either side's repository.

Frequently asked questions

How do I create an iframe embed code from a URL?

Put the URL in the src of an iframe tag and give it a title: <iframe src="https://example.com/page" title="What it shows" width="600" height="400" style="border: 0;"></iframe>. Paste that into your page's HTML where it should appear. The generator on this page writes it for you with the size and permissions you pick.

How do I make an iframe responsive?

Give it width: 100% and either an aspect-ratio (aspect-ratio: 16 / 9 for video) or a fixed pixel height for apps and forms. For an embed with a fixed size, a wrapper with max-width and aspect-ratio lets it shrink on a phone and keep its shape. The Responsive wrapper tab writes that for you.

Why is my iframe blank or saying the site refused to connect?

Almost always the embedded site sends X-Frame-Options or a Content-Security-Policy frame-ancestors rule that doesn't allow your domain. Browsers enforce it and no attribute overrides it, so use the site's official embed URL or ask it to allow your domain. Other causes: an http:// URL on an https:// page, or a sandbox without allow-scripts for a page that needs JavaScript.

Is it safe to embed another site in an iframe?

The same-origin policy stops a frame from another site reading your page, its cookies or its storage. Narrow what it can do with allow (only the features it uses), sandbox and referrerpolicy, and only embed sites you trust: the frame still shows its own content to your visitors.

How do I make an iframe adjust to its content height?

Across origins your page can't measure the frame, so the embedded page has to report its height. It posts its height to your origin with postMessage; your page listens, checks event.origin and event.source, and sets the frame's height. Both snippets are in the Auto-resize tab, and you need to be able to edit both pages.

Can I test iframe embed code before publishing it?

Yes. The live tester on this page loads your URL in a sandboxed frame with the settings you chose. If it draws here, it will usually draw on your site too — unless the site's frame-ancestors rule lists only specific domains.

Want your feature inside other products?

List it as a widget on Ordana, with sign-in, checkout and the revenue split built in. Other startups add it to their product; listing is free.

List a feature as a widget