HTML Audio, Video and Iframes

HTML audio, video and iframes let you embed media directly in a page with no plugins. The <video> and <audio> elements play files, and <iframe> embeds another web page such as a YouTube player or a map.

The video Element

controls shows play and volume buttons. Multiple <source> elements let the browser pick the first format it supports. poster shows an image before playback.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Video</title></head>
<body>
  <video width="400" controls poster="https://picsum.photos/id/1018/400/225">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
    Your browser does not support the video element.
  </video>
</body>
</html>

Autoplay Rules

Browsers only allow autoplay when the video is muted. For background videos use autoplay muted loop playsinline together.

The audio Element

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Audio</title></head>
<body>
  <audio controls>
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
    Your browser does not support audio.
  </audio>
</body>
</html>

Embedding with iframe

An iframe displays another page inside yours. Always add a title for accessibility, and loading="lazy" for off-screen embeds.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>iframe</title></head>
<body>
  <iframe width="400" height="300" title="Map of Lahore" loading="lazy"
    src="https://www.openstreetmap.org/export/embed.html?bbox=74.25%2C31.45%2C74.45%2C31.62&amp;layer=mapnik"></iframe>
</body>
</html>

Captions and Accessibility

Add a <track kind="captions" src="captions.vtt" srclang="en" label="English"> inside a video to provide subtitles. Captions help deaf users, people watching without sound, and also search engines.

Frequently asked questions

How do I embed a YouTube video in HTML?

On YouTube choose Share, then Embed, and copy the <iframe> code into your page. Add loading="lazy" to improve performance.

Why does my HTML video not autoplay?

Browsers block autoplay with sound. Add the muted attribute along with autoplay, and playsinline for iPhones.

Which video format should I use?

MP4 (H.264) works everywhere. Adding a WebM or AV1 source first can reduce file size in browsers that support it.