HTML Tutorial · Page Structure · Lesson 17 of 34

HTML Audio, Video and Iframes

Embed audio, video and other pages.

Video and audio

<video> and <audio> play media natively. controls shows the player; list several <source>s so the browser can pick a format it supports:

<video controls width="640" poster="preview.jpg" preload="metadata">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
  <track kind="captions" src="intro.en.vtt" srclang="en" label="English">
  Your browser doesn't support video.
</video>

<audio controls src="podcast.mp3"></audio>

Add captions (<track>) for accessibility. Autoplaying video must be muted.

Iframes

<iframe> embeds another page — maps, videos, or (like on this site) a sandboxed preview:

Example 1Try it yourself
<iframe title="Embedded demo" width="320" height="120" style="border: 1px solid #94a3b8; border-radius: 8px"
        srcdoc="<body style='font-family:sans-serif;background:#f0fdf4'><h3>I am a page inside a page</h3></body>"></iframe>

Give every iframe a title, and use sandbox to restrict untrusted content.

Test yourself

Which element provides captions for a video?

  1. <caption>
  2. <track>
  3. <subtitle>
  4. <source>
Show answer

Answer: <track>