Media & Embedded Content

<iframe> Embeds

Embed another web page (YouTube, maps, sandboxed widgets).

1Safe Embedding

Always set title for accessibility and use sandbox/allow attributes to restrict what embedded content can do.

Example Code

css

<iframe
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="YouTube video player"
  width="560"
  height="315"
  loading="lazy"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media"
  allowfullscreen
></iframe>

2Put the element in context

An iframe embeds a separate document with its own content and behavior. A meaningful title helps identify the frame, while sandbox permissions can limit its capabilities. External embeds can send requests to the provider even if your own page does not otherwise collect form data.

3Practice with a small page

Embed a trusted test document with an appropriate title. Add only the sandbox permissions its behavior needs, then inspect what stops working. Keep a usable alternative link where appropriate and disclose relevant external-service behavior in your website’s policies.

Finished reading?

Mark this topic as complete to track progress.

<audio> Tag

Next Topic