What is an iframe?

An <iframe> (inline frame) is an HTML element that embeds another web page or document inside the current page. It creates a separate browsing context within a rectangular region of the page, allowing content from a different URL — such as a map, video, or third-party widget — to be displayed without the user navigating away.

Iframes are commonly used to embed YouTube videos, Google Maps, payment forms, social media widgets, and advertisement banners. Because embedded content runs in its own context, attributes like sandbox and allow let developers tightly control what the embedded page is permitted to do.

Tool description

This tool generates ready-to-paste <iframe> HTML code from a simple form. Configure the source URL, dimensions, scrolling behavior, loading strategy, permissions, and sandbox restrictions, and the tool instantly outputs the corresponding tag. No manual attribute-writing or memorization of the sandbox flag syntax is needed.

Examples

Minimal iframe:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

Lazy-loaded iframe with sandbox:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

Iframe with camera and microphone permissions:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

Features

  • Generates valid <iframe> code from a visual form — no HTML knowledge required
  • Full control over permissions (allow) and sandbox restrictions
  • Live preview updates as you change any option

Options explained

Option Description
URL The src attribute — the address of the page to embed
Width / Height Pixel dimensions of the iframe
Title Accessible label (title attribute) for screen readers
Name The name attribute, used as a link target
Scrolling Controls the scrollbar: auto, always on, or always off
Loading eager loads immediately; lazy defers until near the viewport
Allow fullscreen Adds allowfullscreen so the embedded content can go fullscreen
Border When unchecked, adds style="border: none;" to remove the default border
Allow features Grants specific browser API permissions to the embedded page
Sandbox flags Restricts what the embedded page can do; each flag re-enables a specific capability

Tips

  • Always provide a title attribute for accessibility — screen readers announce it when focusing the iframe.
  • Use loading="lazy" for iframes below the fold to improve page load performance.
  • Adding the sandbox attribute with no flags locks the content down completely; add only the flags you actually need.