Rich Media: Video & Audio

HTML5 introduced native <video> and <audio> tags, so you can embed media directly without plugins or third-party players. Both tags work similarly and share many of the same attributes.

Concept 1 — The video tag

The <video> tag embeds a video player on the page. At minimum, provide a src and the controls attribute — without controls, the video renders with no play button and the user has no way to interact with it.

<video src="intro.mp4" controls>
  Your browser does not support the video tag.
</video>

The text between the tags is fallback content — it only shows in very old browsers that don’t understand <video>.

Concept 2 — Common video attributes

<video
  src="intro.mp4"
  controls
  autoplay
  muted
  loop
  width="640"
  height="360"
  poster="thumbnail.jpg">
  Your browser does not support the video tag.
</video>

Attribute	Purpose
`controls`	Show play, pause, volume, and seek bar
`autoplay`	Start playing as soon as the page loads
`muted`	Start with sound off (required for autoplay in most browsers)
`loop`	Restart automatically when the video ends
`width` / `height`	Set dimensions in pixels
`poster="..."`	Image to show before the video plays

Rule: never use autoplay without muted. Browsers block auto-playing videos with sound to protect users from unexpected noise. If you need autoplay — for a background video, for example — always pair it with muted.

Concept 3 — Multiple source formats

Not every browser supports every video format. Providing multiple sources with <source> tags lets the browser pick the first one it can play. List your preferred format first.

<video controls width="640" height="360">
  <source src="intro.webm" type="video/webm">
  <source src="intro.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

WebM is smaller and modern; MP4 is the most universally supported. Together they cover virtually every browser in use today.

Concept 4 — The audio tag

<audio> works exactly like <video> but for sound files. It renders a minimal audio player bar — no visual frame, just controls.

<audio src="podcast.mp3" controls>
  Your browser does not support the audio tag.
</audio>

Like video, it supports autoplay, muted, loop, and multiple <source> tags.

<audio controls>
  <source src="podcast.ogg" type="audio/ogg">
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

Common audio formats and when to use them:

Format	Extension	Notes
MP3	`.mp3`	Most widely supported, good for music and podcasts
OGG Vorbis	`.ogg`	Open format, smaller files, good browser support
WAV	`.wav`	Uncompressed, high quality, very large file size
AAC	`.aac`	Good quality at low bitrates, common on Apple devices

Concept 5 — Embedding external video with iframe

For YouTube, Vimeo, or other hosted video, you don’t use <video> — those platforms provide an embed code that uses an <iframe>. An <iframe> loads another webpage (the video player) inside your page.

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Video title"
  allowfullscreen>
</iframe>

Replace VIDEO_ID with the ID from the YouTube URL. Always include the title attribute — screen readers use it to describe the embedded content.

When to use which: use <video> when you host the file yourself and want full control. Use <iframe> for YouTube or Vimeo — it saves bandwidth and handles playback quality automatically.

Try it yourself

<body>
  <h1>My media page</h1>

  <h2>Video (self-hosted)</h2>
  <video controls width="640" height="360" poster="thumbnail.jpg">
    <source src="sample.webm" type="video/webm">
    <source src="sample.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>

  <h2>Audio</h2>
  <audio controls>
    <source src="sample.ogg" type="audio/ogg">
    <source src="sample.mp3" type="audio/mpeg">
    Your browser does not support the audio tag.
  </audio>

  <h2>Embedded YouTube video</h2>
  <iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="Sample YouTube video"
    allowfullscreen>
  </iframe>
</body>

Quick reference

Tag / Attribute	Purpose
`<video>`	Embed a video player
`<audio>`	Embed an audio player
`<source>`	Provide alternative file formats
`controls`	Show player controls
`autoplay`	Play on page load (pair with `muted`)
`muted`	Start with sound off
`loop`	Repeat when finished
`poster="..."`	Thumbnail before video plays
`<iframe>`	Embed an external video player
`allowfullscreen`	Enable fullscreen on iframes