HTML Iframes

Understanding HTML Iframes

The HTML <iframe> element embeds another webpage or external resource within the current webpage.

Iframes are commonly used for content such as maps, videos, documents, interactive tools, and other resources that are displayed as a separate browsing context inside the surrounding page.

The <iframe> Element

The <iframe> element creates an inline frame that contains another HTML document or embeddable resource.

<iframe src="https://www.example-web.site/" title="Example website"></iframe>

The embedded document remains separate from the surrounding document even though it is displayed as part of the same webpage.

The src Attribute

The src attribute specifies the URL of the resource displayed inside the iframe.

<iframe src="https://www.example-web.site/" title="Example website"></iframe>

The source can be another page on the same website or an external resource that permits itself to be displayed inside an iframe.

The title Attribute

The title attribute provides an accessible name that describes the iframe's purpose or content.

<iframe
  src="https://www.example-web.site/"
  title="Example website">
</iframe>

A meaningful title helps users of assistive technology understand what the embedded content contains without first having to navigate into it.

Iframe Width and Height

The width and height attributes specify the dimensions of an iframe's display area in CSS pixels.

<iframe
  src="https://www.example-web.site/"
  title="Example website"
  width="600"
  height="400">
</iframe>

CSS can also control iframe dimensions and is especially useful when the embedded content needs to adapt to different screen sizes.

iframe {
  width: 100%;
  max-width: 800px;
  height: 450px;
}

Lazy Loading Iframes

The loading="lazy" attribute tells the browser that an off-screen iframe can generally wait to load until the user approaches it.

<iframe
  src="https://www.example-web.site/"
  title="Example website"
  loading="lazy">
</iframe>

Lazy loading can reduce unnecessary network activity and improve initial page loading when embedded content appears farther down a page.

Opening Links in an Iframe

An iframe can be given a name, allowing links elsewhere on the page to use that name as their target.

<a href="https://www.example-web.site/" target="example-frame">Open Example Website</a>

<iframe
  src="about:blank"
  name="example-frame"
  title="Example website">
</iframe>

When the link is activated, its destination loads inside the named iframe instead of replacing the surrounding webpage.

Iframe Restrictions

Not every webpage can be embedded in an iframe. A website can send security policies that instruct browsers not to display its pages inside frames on other websites.

If an external website refuses to load in an iframe, changing the HTML on the embedding page cannot override that restriction. Use an official embed option when the content provider supplies one.

The sandbox Attribute

The sandbox attribute applies additional restrictions to content loaded inside an iframe.

<iframe
  src="https://www.example-web.site/"
  title="Sandboxed example"
  sandbox>
</iframe>

An empty sandbox attribute applies a broad set of restrictions. Individual capabilities can then be permitted with specific sandbox tokens when the embedded content requires them.

<iframe
  src="/example.html"
  title="Interactive example"
  sandbox="allow-forms allow-scripts">
</iframe>

Only grant the permissions that the embedded content genuinely needs.

The allow Attribute

The allow attribute specifies certain browser features that embedded content is permitted to use.

<iframe
  src="https://example.com/"
  title="Embedded content"
  allow="fullscreen">
</iframe>

Depending on the embedded service, permissions may relate to features such as fullscreen display, camera or microphone access, autoplay, or other browser capabilities.

When using third-party embed code, review the permissions it requests rather than adding unnecessary permissions yourself.

Iframe Accessibility

Every meaningful iframe should have a descriptive title that identifies its content or purpose. Avoid vague titles such as iframe or embedded content when a more useful description can be provided.

Embedded content should also be usable with a keyboard and accessible within the embedded resource itself. The surrounding page cannot correct accessibility problems that exist inside a third-party webpage.

HTML Iframe Example

The following example embeds a page from the controlled example website. Try changing the iframe's width, height, title, and src values to see how they affect the embedded content.

HTML Iframe Best Practices

• Give meaningful iframes a descriptive title.
• Use responsive sizing when embedded content needs to work on different screen sizes.
• Consider loading="lazy" for iframes that begin outside the visible portion of the page.
• Remember that external websites can prevent their pages from being embedded.
• Use official embed code when a third-party service provides it.
• Use sandbox and iframe permissions thoughtfully when embedding untrusted or interactive content.
• Avoid embedding unnecessary third-party content because it can increase page weight, tracking, and loading time.

Summary

The HTML <iframe> element embeds another webpage or resource within the current document. The src attribute identifies the embedded resource, while attributes such as title, width, height, loading, sandbox, and allow control its description, presentation, loading, and permissions.

Iframes are useful for many types of embedded content, but they should be used carefully because external resources can affect accessibility, privacy, security, and page performance.