HTML — Lesson 18

HTML Audio & Video

Embedding multimedia content with native HTML elements.

By Majed Qandeel · Jul 26, 2026 · Lesson 18 of 25

HTML Audio & Video

HTML provides native <audio> and <video> elements for embedding multimedia without plugins.

The Video Element

<video controls width="640" poster="thumbnail.jpg"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <p>Your browser does not support HTML video.</p> </video>

Video Attributes

  • controls - Shows play/pause/volume controls
  • autoplay - Plays automatically (often blocked by browsers)
  • muted - Starts muted (required for autoplay to work)
  • loop - Replays the video when it ends
  • poster - Image shown before the video plays
  • preload - none, metadata, or auto

The Audio Element

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

Embedding YouTube Videos

YouTube and other platforms use <iframe> for embedding.

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

HTML5 Video with Fallbacks

<div style="max-width:640px;margin:20px;">
  <h3>HTML5 Video Demo</h3>
  <video controls width="100%" poster="">
    <source src="sample.mp4" type="video/mp4">
    <p>Your browser doesn't support HTML5 video.
       <a href="sample.mp4">Download the video</a> instead.</p>
  </video>
  <p>Video formats: MP4 (best support), WebM (open source).</p>
</div>

Best Practices

  • Provide multiple <source> elements for browser compatibility
  • Always include a fallback message for unsupported browsers
  • Use poster for video to show a preview before loading
  • Use preload="metadata" to avoid loading large files unnecessarily
  • Don't autoplay with sound - it frustrates users
Tip: Self-hosted video gives you more control. Consider services like Cloudflare Stream or Mux for hosting and transcoding video files.

Practice what you learned in the Deoit Editor — a free, browser-based code editor.

Open Editor →