A Web Page Inside Another Web Page?

Imagine you’re creating a travel guide and want to include a map, or you’re building a portfolio and want to display a video. You don’t have to recreate that content yourself.

An iframe (inline frame) embeds a separate HTML document inside your page. The embedded document has its own content, styles, and browsing context.

Because the embedded HTML is stored inside an attribute, characters such as quotation marks and angle brackets need careful escaping. For larger documents, using a separate HTML file is usually easier to maintain.

Make Your Iframe Fit the Screen

A fixed-width iframe can overflow on mobile devices. CSS helps your embed adapt to the available space.

<style>
  .my-frame {
    display: block;
    width: 100%;
    max-width: 700px;
    height: 300px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
  }
</style>

<iframe
  class="my-frame"
  title="Embedded content"
  src="https://example.com/"
></iframe>

You can also use aspect-ratio: 16 / 9 and height: auto for video-style embeds. Choose dimensions that suit the content you’re showing.

What Does sandbox Do?

Embedding another document comes with security considerations. The sandbox attribute applies restrictions to the iframe’s content.

<iframe
  title="Restricted preview"
  srcdoc="<h2>Safe preview</h2>"
  sandbox
></iframe>

An empty sandbox attribute applies a restrictive set of rules, including blocking scripts and forms by default. Specific permissions can be granted when genuinely necessary.

<iframe
  title="Interactive demo"
  src="/demos/interactive.html"
  sandbox="allow-scripts"
></iframe>

Help Everyone Enjoy Your Embed

Every iframe loads another document, which can require additional resources. Make your embeds purposeful, accessible, and efficient.

<iframe
  src="https://example.com/"
  title="Interactive learning resource"
  loading="lazy"
  width="640"
  height="360"
  referrerpolicy="no-referrer"
></iframe>

• Give each iframe a meaningful title.
• Use loading="lazy" for suitable offscreen embeds.
• Set useful dimensions to reduce layout shifting.
• Use trusted embed sources and appropriate security restrictions.
• Provide an alternative link when embedded content might be unavailable.

The referrerpolicy attribute controls how much referrer information the browser sends when requesting the embedded resource.

Where Will You Use Iframes?

Iframes are especially useful when another service provides an approved embed for its content.

• Videos: Embed a video using its provider’s official embed URL.
• Maps: Display a location with an embeddable map.
• Documents: Present supported external documents or previews.
• Interactive demos: Show a separate learning experience inside a page.