HTML Multimedia
audio, video, YouTube Embeds, and Accessibility

Media Elements

HTML Multimedia: Bringing Your Web Pages to Life

Text and images can only take your message so far. If you want your webpage to sing, speak, or stream, multimedia is your secret ingredient. HTML5 makes it easy to embed audio, video, and even YouTube — all without third-party plugins.

Adding Audio with <audio>

The <audio> tag is used to embed sound clips, music, or voice recordings. It can include controls, autoplay, loop, and more.

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

[ Audio player appears here ]

The controls attribute provides a default player interface. Always include fallback text for unsupported browsers.

Embedding Video with <video>

The <video> tag is perfect for adding playable media — such as tutorials, product demos, or animations.

<video width="320" height="240" controls>
  <source src="banana-video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

[ Video player appears here with controls ]

You can also use attributes like autoplay, muted, loop, and poster (for thumbnail).

Using the <source> Tag

Want to support multiple file formats? Use multiple <source> elements inside your audio or video tag. The browser plays the first format it supports.

<video controls>
  <source src="cherry.mp4" type="video/mp4">
  <source src="cherry.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

Adding Subtitles with <track>

The <track> element adds subtitles or captions for videos, improving accessibility.

<video controls>
  <source src="fruit-tour.mp4" type="video/mp4">
  <track src="captions.vtt" kind="subtitles" srclang="en" label="English">
</video>

Caption files must be in .vtt (WebVTT) format.

Embedding YouTube Videos

You can embed a YouTube video using an <iframe>.

<iframe width="560" height="315"
  src="https://www.youtube.com/embed/dQw4w9WgXcQ"
  title="Cherry Pie Recipe"
  frameborder="0"
  allowfullscreen>
</iframe>

[ Embedded YouTube video appears here ]

YouTube gives you this embed code directly when you click “Share → Embed”.

Accessibility Tips for Multimedia

  • Always include controls for user-friendly interaction
  • Use <track> for subtitles and captions
  • Provide descriptive alt text in surrounding content
  • Don’t autoplay audio or video without user consent

Example: Multimedia Showcase

<h2>Fruit Sound and Sight Experience</h2>

<audio controls>
  <source src="apple-bite.mp3" type="audio/mpeg">
  Audio not supported.
</audio>

<video width="320" height="240" controls>
  <source src="banana-slice.mp4" type="video/mp4">
  Video not supported.
</video>

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

Summary

Multimedia in HTML lets you go beyond static pages. You’ve learned how to:

  • Embed audio using <audio>
  • Play video with <video>
  • Support multiple formats with <source>
  • Add captions using <track>
  • Embed YouTube videos with <iframe>
  • Improve accessibility for all users

What’s Next?

Coming up: We’ll explore HTML Canvas and SVG — where graphics and interactivity meet code.

QUIZ

Question 1:What is the primary purpose of the <audio> tag in HTML?

Question 2:The <video> element in HTML5 supports multiple source formats within the same tag using <source> elements.

Question 3:Which of the following attributes can be used with the <video> tag?

Question 4:When embedding a YouTube video in HTML, which tag is primarily used?

Question 5:What roles do the <source> and <track> elements play inside media tags?

Question 6:Accessibility in HTML multimedia is improved by including captions and transcripts via the <track> element.