HTML Iframes — htmlstart Learn

An iframe embeds another web page or media inside your page.

The <iframe> Element

An iframe (inline frame) lets you embed another HTML page, a YouTube video, a map, or any external content inside your page.

<iframe src="https://example.com" width="600" height="400"></iframe>

Embed a YouTube Video

<!-- Get the embed URL from YouTube: Share → Embed → copy src -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="YouTube video player"
  allowfullscreen>
</iframe>

Embed a Google Map

<iframe
  src="https://maps.google.com/maps?q=London&output=embed"
  width="600"
  height="450"
  style="border:0;"
  allowfullscreen
  loading="lazy">
</iframe>

Important Attributes

Attribute	Purpose
`src`	URL of the embedded page
`width` / `height`	Dimensions in pixels
`allowfullscreen`	Allows video fullscreen
`loading="lazy"`	Defers loading until visible
`title`	Accessible description (required)

Always add a title attribute to iframes — screen readers need it to describe what is embedded. Also add loading="lazy" to speed up page load.