How to embed another page with iframe

Embed a page

An iframe creates a separate browsing context inside your page. Always give it a concise, descriptive title.

<iframe
  src="https://example.com/embed/map"
  title="Map showing the training center"
  width="640" height="360"
  loading="lazy">
</iframe>

Use embeds selectively

Iframes add network, performance, privacy, and accessibility costs. Prefer a normal link if users do not need the content inline, and follow the provider's documented embed URL.

Restrict capabilities

The sandbox attribute blocks many capabilities by default; grant only what the trusted embed genuinely needs. Permissions Policy further limits sensitive features.

<iframe src="https://trusted.example/widget"
        title="Payment calculator"
        sandbox="allow-scripts allow-forms"
        allow="fullscreen">
</iframe>

Plan for failure and layout

Use CSS such as max-width: 100% or an aspect-ratio wrapper, reserve dimensions to avoid layout shifts, and provide a direct link when useful. Never assume you can style or script a cross-origin iframe's internal document.