Path // www.yourhtmlsource.com → Reference → <IFRAME> ELEMENT

<iframe> element

by Ross Shannon

The <iframe> element (inline frame) embeds another HTML document within the current document. Each iframe has its own browsing context, with its own session history and document. Iframes are commonly used for embedding third-party content like YouTube videos, Google Maps, social media widgets, advertisements, and sandboxed content.

Clock This page was last updated on 2025-11-17


Syntax

The <iframe> element can include fallback content for browsers that don’t support iframes:

<iframe src="page.html" width="600" height="400">
  Your browser does not support iframes.
</iframe>

Key Attributes

  • src — The URL of the page to embed. Can be absolute or relative.
  • srcdoc — Inline HTML to embed, overriding src. Useful for sandboxed content.
  • width — The width of the iframe in pixels or as a percentage.
  • height — The height of the iframe in pixels or as a percentage.
  • name — A name for the iframe, usable as a link target.
  • sandbox — Applies extra restrictions to the iframe content. Values can include:
    • allow-scripts — Allows JavaScript execution
    • allow-forms — Allows form submission
    • allow-same-origin — Treats content as same-origin
    • allow-popups — Allows popups
    • allow-modals — Allows modal dialogs
  • allow — Specifies a Permissions Policy for the iframe (e.g., fullscreen, camera, microphone).
  • allowfullscreen — Boolean attribute. Allows the iframe to use fullscreen mode.
  • loading — Controls lazy loading. Values: lazy or eager.
  • referrerpolicy — Controls what referrer information is sent when loading the iframe source.

The following attributes are obsolete:

  • frameborder — Use CSS border instead
  • scrolling — Use CSS overflow instead
  • marginwidth / marginheight — Use CSS instead
  • align — Use CSS instead

Examples

Embedding a YouTube Video

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen>
</iframe>

Always include a descriptive title attribute for accessibility.

Sandboxed Content

<iframe
  src="untrusted-content.html"
  sandbox="allow-scripts allow-same-origin"
  width="100%"
  height="500">
  Unable to display content.
</iframe>

The sandbox attribute restricts the iframe’s capabilities for security.

Lazy-Loaded Iframe

<iframe
  src="https://maps.google.com/maps?q=location"
  width="600"
  height="450"
  loading="lazy"
  title="Google Maps location"
  allowfullscreen>
</iframe>

Lazy loading defers iframe loading until it’s near the viewport, improving page load performance.

When to Use

Common Use Cases:

  • Embedding third-party content (videos, maps, social media)
  • Isolating untrusted content in a sandbox
  • Displaying external documents or web applications
  • Creating modular, reusable components
  • Payment forms that require PCI compliance

Security Best Practices:

  • Use the sandbox attribute to restrict iframe capabilities
  • Only embed content from trusted sources
  • Use Content Security Policy (CSP) headers to control what can be embedded
  • Be aware of clickjacking attacks — use X-Frame-Options header on your pages
  • Avoid embedding iframes that request sensitive permissions unnecessarily

Accessibility Considerations:

  • Always include a descriptive title attribute explaining the iframe’s content
  • Ensure embedded content is keyboard accessible
  • Consider that screen readers may have difficulty with iframe content
  • Provide alternative ways to access the content when possible
  • Be mindful of focus management between parent and iframe

Performance Considerations:

  • Iframes create separate browsing contexts, increasing memory usage
  • Use loading="lazy" for iframes below the fold
  • Minimize the number of iframes on a page
  • Consider the performance impact of third-party scripts loaded by iframes
  • <frame> — Deprecated element for frames (use iframe instead)
  • <frameset> — Deprecated container for frames
  • <object> — Embeds external resources with fallback support
  • <embed> — Embeds external content