← Back to Tutorials Chapter 8

Media

Audio

The <audio> element embeds sound files:

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

Audio Attributes

• controls — shows play/pause/volume controls
• autoplay — starts playing automatically (use with caution)
• loop — repeats the audio
• muted — starts muted
• preload — hints at what to load: none, metadata, auto

Video

The <video> element embeds video files:

<video width="640" height="360" controls poster="images/thumbnail.jpg">
  <source src="video/tutorial.mp4" type="video/mp4">
  <source src="video/tutorial.webm" type="video/webm">
  <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
  Your browser does not support the video element.
</video>

Video Attributes

• controls — playback controls
• autoplay — start automatically
• loop — repeat
• muted — start muted (required for autoplay in most browsers)
• poster — thumbnail image before playback
• width / height — dimensions
• playsinline — play inline on mobile (no fullscreen)

Subtitles & Captions

Use the <track> element to add subtitles, captions, or descriptions:

<track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
<track src="captions-es.vtt" kind="captions" srclang="es" label="Spanish">
<track src="descriptions.vtt" kind="descriptions" srclang="en" label="English Description">

The .vtt file format (WebVTT):

WEBVTT

00:00:01.000 --> 00:00:05.000
Welcome to this tutorial.

00:00:06.000 --> 00:00:10.000
Today we'll learn about HTML media elements.

Embedded Content

iframes

Embed another page or external content:

<iframe src="https://example.com" width="100%" height="400" style="border:0;" 
        allowfullscreen loading="lazy" title="Example page"></iframe>

YouTube Videos

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

Best Practices for Media

• Always provide fallback content for unsupported formats
• Use multiple source formats for cross-browser support
• Set width and height to prevent layout shifts
• Use loading="lazy" on iframes for performance
• Add captions/subtitles for accessibility
• Compress audio and video files for faster loading