Embedding Content

The <iframe> (inline frame) embeds another HTML document inside the current page. Common uses:

• Embedding YouTube or Vimeo videos
• Google Maps
• Third-party widgets (payment forms, chat widgets)
• Code playgrounds (CodePen, JSFiddle)

Key attributes

• src — URL of the document to embed.
• title — Required for accessibility. Screen readers use this to describe the iframe content.
• width / height — Dimensions of the frame.
• loading="lazy" — Defers loading until the iframe is near the viewport.
• allowfullscreen — Permits the embedded content to go fullscreen (needed for video players).

Embedding third-party content is a security risk. The sandbox attribute restricts what the embedded page can do:

<iframe src="widget.html" sandbox></iframe>

With sandbox alone (no values), the iframe:

• Cannot run JavaScript
• Cannot submit forms
• Cannot open popups
• Cannot navigate the parent page
• Is treated as a unique origin (no cookie access)

You can selectively re-enable features:

• sandbox="allow-scripts" — Enables JavaScript.
• sandbox="allow-forms" — Enables form submission.
• sandbox="allow-same-origin" — Treats the iframe as same-origin.
• sandbox="allow-popups" — Allows window.open and target="_blank".

Warning: Combining allow-scripts and allow-same-origin essentially removes the sandbox. Avoid this unless you trust the content completely.

The allow attribute controls browser features (permissions policy):

<iframe src="video.html" allow="camera; microphone; fullscreen"></iframe>

The srcdoc attribute lets you provide HTML content directly, without loading an external URL:

<iframe srcdoc="<h1>Hello from srcdoc!</h1><p>This is inline HTML.</p>"
        sandbox
        title="Inline demo">
</iframe>

This is useful for:

• Sandboxed code previews
• Isolated rendering of user-generated content
• Avoiding an extra network request

When both src and srcdoc are present, srcdoc takes priority.

Before HTML5 standardised <video>, <audio>, and enhanced <iframe>, two elements were used for embedding:

<object>

A generic container for embedded content — PDFs, Flash, SVG, even other HTML pages.

<object data="document.pdf" type="application/pdf" width="600" height="400">
  <p>Your browser cannot display PDFs. <a href="document.pdf">Download it</a>.</p>
</object>

<embed>

A void element (no closing tag) for plugin content:

<embed src="animation.swf" type="application/x-shockwave-flash" width="400" height="300">

Today, <object> is primarily used for PDF embedding. <embed> is rarely needed. Prefer <iframe>, <video>, and <audio> for modern use cases.