Iframe Generator
Generate HTML iframe embed codes easily. Customize dimensions, scrolling, borders, and responsive options. Copy code instantly.
An iframe generator writes the HTML tag that embeds one web page inside another. Type the address in URL, set Width and Height with the px or % selector beside each box, and the HTML Code panel rewrites itself on every keystroke. With the defaults — 100% wide, 600px tall, Show Scrollbar on, Border off, Allow Fullscreen and Lazy Loading on — it produces <iframe src="https://example.com" width="100%" height="600px" style="border: none;" allowfullscreen loading="lazy"></iframe>
Popular Tools
About Iframe Generator
This page builds one HTML element: a single <iframe> tag, with no wrapper div, no stylesheet and no script. You give it a URL and two numbers, and every checkbox you touch is reflected in the HTML Code panel immediately. The Preview panel beside it renders the same address at the same size with the same border, so you can see the embed before you paste the tag anywhere.
Each control maps to one part of the tag. Width and Height each have their own px or % selector, and the quick buttons under the tool set 300x200, 560x315, 800x600 or full width in one click. Show Scrollbar, when unticked, adds scrolling="no". Border, when ticked, opens Border Type (solid, dashed, dotted, double), Border Width on a 1-10 px slider and Border Color as a swatch plus a hex field, and writes them into a style attribute such as style="border: 4px solid #FF6600;". Allow Fullscreen adds the bare allowfullscreen attribute, Lazy Loading adds loading="lazy".
What it deliberately leaves out matters as much. The tag carries no title attribute, no sandbox, no allow and no referrerpolicy, so add a title yourself before shipping: a frame without one is announced as an unlabelled region by screen readers. Note also that scrolling is on the WHATWG HTML Standard's list of obsolete, non-conforming attributes, so a validator will flag it even though browsers still honour it.
The generator cannot make a site embeddable. If the target responds with X-Frame-Options: DENY or SAMEORIGIN, or with a Content-Security-Policy frame-ancestors directive that excludes your domain, the browser refuses to paint the frame no matter what the tag says, and the Preview panel stays blank. Nothing you type here is sent anywhere: the tag is assembled in your browser, and the only request made is the one your own browser makes to draw the preview.
Use Cases
How to use
Type or paste the address of the page you want to embed into the URL field; the HTML Code panel stays empty until there is one.
Set Width and Height, picking px or % in the selector beside each number, or press one of the 300x200, 560x315, 800x600 and 100% buttons under the tool.
Tick or untick Show Scrollbar, Allow Fullscreen and Lazy Loading. Each one adds or removes an attribute in the code as you click it.
Turn on Border to reveal Border Type, Border Width and Border Color, and watch the style attribute appear in the generated tag.
Check the Preview panel: it renders the same URL at the same size and border, so a blank frame means that site refuses to be embedded.
Press the copy button at the top right of the HTML Code panel, paste the tag into your page and add a title attribute for screen readers.
Pro Tips
- Leave Width on % and Height on px. That pairing, the default 100% by 600px, is what makes the embed shrink with the column it sits in; switching Width to px pins the frame and it will overflow a phone screen.
- Add title="..." to the tag after you copy it. The generator emits no title attribute, and an iframe without one is announced as an unnamed frame, which is the single most common accessibility complaint about embeds.
- Untick Show Scrollbar only when you must. It writes scrolling="no", an attribute the HTML Standard lists as obsolete; controlling overflow with CSS inside the embedded page is the conforming way to do it.
- The Border Color control has a swatch and a hex field side by side. Type #FF6600 in the text field and both the Preview border and the style attribute in the HTML Code panel change together, so you can match a brand colour exactly.
- If the Preview stays blank while the code looks perfect, stop editing the tag: the target site is refusing to be framed, and no attribute in this generator can override its X-Frame-Options or Content-Security-Policy header.
Troubleshooting
The Preview panel is empty although the URL is right and the code looks correct.
The site you are framing is refusing it, through an X-Frame-Options: DENY or SAMEORIGIN response header or a Content-Security-Policy frame-ancestors directive. Use the embed URL the service publishes for this purpose, or link to the page instead of framing it.
The HTML Code panel shows nothing and the Preview reads 'Enter a URL to see the preview'.
No address has been entered yet. The tag is only assembled once the URL field has a value, and the field expects a full address including the scheme, so type https:// in front of the domain rather than starting at www.
The embed sticks out past the edge of the page on a phone.
Width is set in px. Switch the selector next to Width from px to % and set the number to 100, which is the default pairing; the frame then takes the width of its container instead of a fixed pixel count.
An HTML validator reports that the scrolling attribute is not allowed.
That happens when Show Scrollbar is unticked, which writes scrolling="no". The WHATWG HTML Standard lists scrolling among the obsolete, non-conforming iframe attributes. Tick Show Scrollbar again and hide the overflow with CSS inside the embedded page.
Frequently Asked Questions
It is a form that writes an HTML <iframe> tag for you. You supply the page address and the size, tick the behaviour you want, and it assembles the attributes in the right order so you can copy one line into your own page. Everything it produces is plain HTML you could type by hand; the point is getting the quoting, units and attribute names right the first time.
Almost always because the site refuses to be framed. A response header of X-Frame-Options: DENY or SAMEORIGIN, or a Content-Security-Policy with a frame-ancestors directive that does not list your domain, tells the browser to leave the frame blank. This is a decision made by the site you are embedding, and no attribute in the generated tag can override it. Check the Preview panel here first.
Keep Width at 100 with % selected, which is the default, so the frame follows the width of whatever container you paste it into. Height stays in px because a percentage height needs a sized parent. For a fixed aspect ratio, wrap the copied tag in a div and give that div aspect-ratio: 16 / 9 in your own CSS; the generator does not emit a wrapper.
Use the video's embed address, the one under youtube.com/embed/, not the watch?v= link, then press the 560x315 button for the classic player size. Leave Allow Fullscreen ticked so the player's fullscreen control works, and Lazy Loading ticked so the player only loads when the reader scrolls to it.
A LinkedIn post can be framed only through the embed address LinkedIn itself gives you under the post's share menu. Ordinary linkedin.com profile and feed URLs send framing restrictions and will show as an empty frame here and on your site. Paste the URL into this tool and look at the Preview panel: if it is blank, the page cannot be embedded.
No. The <iframe> element is a current part of the HTML Standard and is not going anywhere. Several of its old attributes are obsolete, including scrolling, frameborder, marginwidth, marginheight and align, which is why this tool writes borders as a style attribute rather than frameborder. Sizes, allowfullscreen and loading are all current.
A frame is a separate browsing context, so the embedded page cannot read your page's DOM or cookies across origins, and yours cannot read its. The real risks are that you hand screen space to a site you do not control, and that the embedded page can try to navigate the top window. The sandbox attribute limits that, and this generator does not add it, so type it in yourself when you frame anything untrusted.
Embedding something maintained elsewhere: a video player, a map, a payment form, a booking widget, a live demo of a code sample, a dashboard from another tool. The embedded page keeps its own scripts, styles and updates, so you get the content without copying it and without it interfering with your own page's CSS.
No. The tag it writes contains only src, width, height, an optional scrolling, a style attribute, allowfullscreen and loading. There is no sandbox, no allow and no referrerpolicy field in this tool. Add sandbox="allow-scripts allow-same-origin" or a tighter list by hand if you are framing content you do not control.
Anywhere your page accepts raw HTML: a WordPress Custom HTML block, a Shopify or Squarespace code block, a static .html file, or a template in your framework. Paste it inside the <body>, not the <head>. If your editor keeps escaping the angle brackets, look for a source or code view rather than the rich-text view.