ES
Home › Developer Tools › Iframe Generator

Iframe Generator

Turn any URL into clean, accessible iframe embed code. Choose a fixed size or a responsive aspect ratio, style the border, set allow permissions and sandbox rules, enable lazy loading, and check the result in a live preview.

Last updated:

Source

Size

Appearance & loading

Permissions (allow)

Sandbox

Advanced: id, name, class

Embed code

Live preview

Blank or "refused to connect"? The site forbids framing (X-Frame-Options / CSP frame-ancestors). Use its official embed link instead.

Advertisement
Advertisement

How to use the Iframe Generator

  1. Paste a URL (or an existing <iframe> snippet). Video and music page links are converted to their embed URLs automatically.
  2. Add a title that describes the embedded content, so screen reader users know what the frame contains.
  3. Choose the size: a fixed width and height, or responsive mode with an aspect ratio that scales to the width of your layout.
  4. Set behavior: border and corners, lazy loading, fullscreen, allow permissions and, for untrusted content, sandbox restrictions.
  5. Check the preview, then copy the code into your HTML, CMS or page builder (use an HTML or Custom code block).

Iframe attributes explained

AttributeExampleWhat it does
srchttps://…/embedThe page to load inside the frame
titleStore location mapAccessible name announced by screen readers (required by WCAG for frames)
width / height560 / 315Fixed size in CSS pixels; width can also be a percentage
styleaspect-ratio:16 / 9CSS for border, corners and responsive sizing
allowautoplay; encrypted-mediaPermissions policy: which browser features the framed page may use
allowfullscreen(boolean)Lets the frame enter fullscreen, e.g. a video player's fullscreen button
sandboxallow-scripts allow-formsApplies extra restrictions; each token re-enables one capability
loadinglazyDefers loading until the frame is near the viewport
referrerpolicystrict-origin-when-cross-originHow much of your page URL is sent to the embedded site
frameborder, scrolling(obsolete)Old HTML4 attributes; use CSS border and the embedded page's own overflow instead

Responsive iframe: the formula

A responsive frame keeps its shape as its width changes. With modern CSS this takes one property: width:100%; aspect-ratio:16 / 9. The legacy technique uses a wrapper whose padding-top is a percentage of its width:

padding-top = height ÷ width × 100%, so 16:9 = 9 ÷ 16 = 56.25%, 4:3 = 75%, 1:1 = 100%, 9:16 = 177.78% and 21:9 = 42.857%.

The iframe is then positioned absolutely to fill the wrapper. Both approaches give the same result; aspect-ratio is supported by all current browsers.

Iframe tips

  • Use the official embed URL. Normal page URLs of YouTube, Vimeo, Spotify and many others refuse to load in a frame; their /embed/ URLs are made for it. This generator converts common links automatically.
  • Always use https. Browsers block http:// frames on https:// pages.
  • Sandbox untrusted content. If you embed user-supplied or third-party HTML, start from an empty sandbox and add only the tokens it needs.
  • Lazy load below-the-fold embeds. Iframes are expensive; deferring them improves page speed and Core Web Vitals.

Frequently asked questions

What is an iframe?

An iframe (inline frame) is an HTML element that embeds another web page inside the current page. It is how videos, maps, forms, music players and widgets from other sites are usually embedded.

How do I make an iframe responsive?

Set the iframe to width:100% and give it a fixed shape with the CSS aspect-ratio property, for example aspect-ratio: 16 / 9. For very old browsers, wrap it in a container with padding-top equal to height divided by width (56.25% for 16:9) and position the iframe absolutely inside it. This tool can output either version.

Why does the preview say the site refused to connect?

Many sites forbid being framed by other sites using the X-Frame-Options header or the Content-Security-Policy frame-ancestors directive. That is set by the embedded site and cannot be changed from your page. Use the site's official embed URL if it offers one.

What does the sandbox attribute do?

An empty sandbox attribute applies all restrictions: no scripts, no forms, no popups, and the content is treated as a unique origin. Each token such as allow-scripts or allow-forms lifts one restriction. Avoid combining allow-scripts with allow-same-origin for content from your own origin, because the frame could then remove its own sandbox.

What is the allow attribute?

The allow attribute sets a permissions policy for the frame: which powerful features (autoplay, camera, microphone, geolocation, fullscreen, clipboard-write, encrypted-media and others) the embedded page may use. Features not listed are denied for cross-origin frames.

Should I add loading="lazy" to iframes?

Yes for iframes below the fold. Lazy loading tells the browser to defer loading the frame until the user scrolls near it, which speeds up the initial page load. Leave it off for an embed at the very top of the page.

Why does my iframe need a title?

Accessibility guidelines (WCAG) require frames to have a title that describes their content. Screen readers announce it when users navigate into the frame.

Are all the tools on FreeToolCabin tested for quality and accuracy?

Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.

Related tools

YouTube Embed Code GeneratorCreate responsive YouTube embed code with start time, autoplay, loop and privacy mode.Google Maps Embed GeneratorTurn an address or coordinates into responsive Google Maps iframe embed code, no API key.HTML Editor (Live Preview)Write HTML, CSS and JavaScript and see a live, sandboxed preview as you type.HTML Form BuilderDrag and drop form fields with labels and validation, then copy accessible HTML and CSS code.Clock Widget GeneratorDesign an analog or digital clock for any time zone and copy embed code for your website.Countdown Widget GeneratorDesign an embeddable countdown and copy HTML code or an iframe link for your website or Notion.360 Panorama ViewerView 360° photos interactively: drag, zoom, gyroscope, little planet, embed code. No upload.Open Graph PreviewPaste OG tags and preview how links look on Facebook, X and LinkedIn.CSS Box Shadow GeneratorDesign layered CSS box shadows with a live preview, presets and one-click Copy CSS.CSS Border Radius GeneratorRound each corner, draw elliptical 8-value radii or random blob shapes and copy the CSS.CSS Button GeneratorDesign CSS buttons with gradients, borders, shadows and hover and active states, then copy the code.CSS Flexbox GeneratorBuild flexbox layouts visually: set container and item properties, then copy the CSS and HTML.Twitter Card GeneratorCreate X / Twitter Card meta tags with Open Graph fallbacks, character counters and a live preview.CSS Grid GeneratorDraw CSS grid layouts: set tracks and gaps, drag to name areas, then copy the CSS and HTML.PX to REM ConverterConvert px to rem or em and back, with a 1-100px table and a whole-CSS converter.Glassmorphism CSS GeneratorDesign frosted-glass UI cards with blur, transparency and border sliders, then copy the CSS.CSS Text Shadow GeneratorLayer CSS text shadows with a live preview and neon, 3D, outline and retro presets.HTML to JSX ConverterConvert HTML to valid React JSX: className, htmlFor, style objects, self-closing tags and events.CSS Clip-Path GeneratorDraw CSS clip-path shapes by dragging points: polygons, circle, ellipse and inset. Copy the CSS.CSS Animation GeneratorCreate CSS keyframe animations from 23 presets with live preview, timing controls and Copy CSS.CSS Triangle GeneratorMake CSS triangles in 8 directions with the border trick or clip-path. Set size and color, copy CSS.CSS Loader GeneratorPick from 14 pure CSS spinners and loaders, set color, size and speed, then copy the HTML and CSS.Cubic Bezier GeneratorDrag the control points to design a CSS easing curve, compare it with linear and copy cubic-bezier().CSS Filter GeneratorAdjust blur, brightness, contrast, hue, sepia and drop-shadow on an image and copy the CSS filter.CSS Specificity CalculatorCalculate CSS selector specificity (a, b, c), including :is(), :not(), :has() and :where(), and compare.Neumorphism CSS GeneratorDesign soft UI neumorphic shapes with live preview and copy the box-shadow CSS.SVG Wave GeneratorMake layered SVG waves for section dividers and export SVG, PNG or a CSS background.SVG Blob GeneratorGenerate random organic SVG blob shapes with gradients and export SVG, PNG or CSS clip-path.CSS Clamp GeneratorTurn min/max sizes and viewport widths into a fluid CSS clamp() value in rem and vw.CSS @font-face GeneratorTurn font files or URLs into ready-to-paste @font-face rules with weights, styles and a preview.CSS Media Query GeneratorBuild @media rules for widths, orientation, dark mode and hover, or get framework breakpoints.CSS Scrollbar GeneratorStyle scrollbars: width, colors, radius and hover, with ::-webkit-scrollbar and scrollbar-color CSS.CSS Sprite GeneratorPack many icons into one sprite sheet PNG and get CSS classes with background-position.CSS Text Gradient GeneratorMake gradient text with background-clip:text: color stops, angle, font preview and fallback CSS.CSS Toggle Switch GeneratorDesign pure-CSS toggle switches: size, colors, shape and animation. Copy accessible HTML + CSS.CSS Tooltip GeneratorBuild pure CSS tooltips: position, arrow, colors, padding and animation. Copy HTML and CSS.PX to VW ConverterConvert pixels to vw and vh for any viewport size, and vw/vh back to px, with breakpoint tables.SVG Path EditorEdit an SVG path d attribute visually: drag points, edit commands, convert, scale and minify.HTML Accessibility CheckerPaste HTML to find WCAG accessibility problems with impact level, the failing element and a fix.HTML Image Map GeneratorDraw clickable rectangle, circle and polygon hotspots on an image and get image map HTML.SVG ViewerOpen or paste SVG code to preview it live with zoom, backgrounds, size info and PNG export.Pathfinding VisualizerAnimate BFS, DFS, Dijkstra, A* and greedy search on a grid with walls, weights and mazes.SVG to CSS Data URITurn SVG code into a small URL-encoded data URI for CSS backgrounds, with Base64 size comparison.SVG to JSXTurn SVG code into a clean React component: camelCase attributes, style objects, TypeScript.Tailwind CSS Cheat SheetSearchable Tailwind class to CSS reference with live previews, class decoder and color palette.Web App Manifest GeneratorCreate a PWA manifest.json and every app icon size from one image, downloaded as a ZIP.CSS Background Pattern GeneratorMake pure-CSS stripes, dots, checkerboard, zigzag and grid backgrounds and copy the code.CSS Color Filter GeneratorTurn a HEX color into a CSS filter that recolors black icons and SVGs, with an accuracy score.CSS Gradient Animation GeneratorCreate animated gradient backgrounds: pick colors, angle and speed, preview live and copy the CSS.CSS Hover Effects GeneratorPick button, link and image hover effects, tweak colors and timing, and copy the HTML and CSS.CSS InlinerMove CSS from style blocks into inline style attributes so HTML emails render in every client.CSS Shape Divider GeneratorCreate wave, tilt, curve and triangle section dividers and copy the SVG, HTML and CSS.CSS Transform GeneratorRotate, scale, skew and translate an element with sliders and copy the CSS transform code.Font Pairing ToolPreview Google Font heading and body pairs on real layouts and copy the embed code and CSS.
See all 52 Web, HTML & CSS Tools →