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:
<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?
<caption><track><subtitle><source>
Show answer
Answer: <track>