Introduction

HTML multimedia lets you add sound, video, and embedded content directly to web pages. Before HTML5, sites relied on plugins like Flash. Today, native <audio> and <video> elements work across modern browsers with built-in controls.

This tutorial covers syntax, common attributes, YouTube embeds, accessibility, best practices, and six hands-on examples you can run in the editor.

What You’ll Learn

What Is HTML Multimedia?

HTML multimedia means using HTML elements to embed and control media—audio clips, video files, and content hosted on external platforms—without leaving the page.

The <audio> and <video> elements provide a standard API: play, pause, volume, and fullscreen (for video). The <source> child element lists file URLs and MIME types so browsers can pick a supported format.

HTML5 Audio

The <audio> element embeds sound in a page. Common formats include MP3 (audio/mpeg), WAV (audio/wav), and Ogg (audio/ogg). Browsers differ slightly in format support, so offering two sources is a safe pattern.

Basic Syntax

<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

Attributes

• controls — shows play, pause, and volume controls.
• autoplay — starts playback when ready (often blocked unless muted).
• loop — repeats the clip when it ends.
• muted — starts with sound off; required for many autoplay cases.
• preload — hints loading: none, metadata, or auto.

Example

<audio controls loop preload="metadata">
  <source src="example.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

See also the audio tag reference for the full attribute list.

HTML5 Video

The <video> element embeds moving pictures. Supported formats include MP4 (video/mp4), WebM (video/webm), and Ogg (video/ogg). Like audio, list multiple source elements for broader compatibility.

Basic Syntax

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

Attributes

• controls — play, pause, volume, timeline, and fullscreen.
• autoplay — auto-start (usually needs muted).
• loop — replay when finished.
• muted — no sound on start.
• poster — image URL shown before playback begins.
• width / height — player dimensions (use CSS max-width: 100% for responsive layouts).

Example

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

See the video tag reference for more details.

Embedding External Multimedia

When media is hosted on YouTube, Vimeo, or similar services, embed it with an <iframe>. The platform handles encoding, bandwidth, and playback. Copy the embed code from the service’s share dialog.

Example (YouTube Embed)

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="Tutorial video"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen></iframe>

Replace VIDEO_ID with the ID from the YouTube URL. Always set a descriptive title so screen readers announce the embedded content.

Accessibility Considerations

Multimedia must work for everyone, including users who rely on captions, transcripts, or keyboard navigation:

• Provide captions or subtitles for spoken content using <track kind="subtitles">.
• Offer a text transcript for audio-only material when possible.
• Do not autoplay sound unexpectedly—respect user preferences and browser policies.
• Ensure custom players expose keyboard controls and visible focus states.
• Add meaningful title attributes on iframes.

Example of Subtitles

<video width="640" height="360" controls>
  <source src="example.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video tag.
</video>

WebVTT (.vtt) files hold timed caption text. Learn more in the track tag reference.

Examples Gallery

Six examples from basic audio to a full multimedia page. Each includes View Output and Try It Yourself.

<audio controls>
  <source src="t-rex-roar.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<audio controls loop preload="metadata">
  <source src="t-rex-roar.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

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

<video width="640" height="360" controls poster="thumbnail.jpg">
  <source src="flower.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/EngW7tLk6R8"
  title="HTML tutorial video"
  allowfullscreen></iframe>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>HTML Multimedia Example</title>
</head>
<body>
  <h1>HTML Multimedia Example</h1>

  <h2>Audio Example</h2>
  <audio controls>
    <source src="audio.mp3" type="audio/mpeg">
  </audio>

  <h2>Video Example</h2>
  <video width="640" height="360" controls>
    <source src="video.webm" type="video/webm">
  </video>

  <h2>Embedded Video</h2>
  <iframe src="https://www.youtube.com/embed/VIDEO_ID"
    title="Tutorial video" allowfullscreen></iframe>
</body>
</html>

Best Practices