HTML Audio & Video

📚 Lesson 14 of 25  •  ⏱ 10 min read  •  Intermediate

HTML5 Video

Use the <video> tag to embed video files hosted on your server:

HTML
<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Your browser doesn't support video.</p>
</video>

<!-- Common video attributes -->
<video controls    <!-- show play/pause controls -->
       autoplay   <!-- play immediately (must also be muted) -->
       muted      <!-- no sound (required for autoplay) -->
       loop       <!-- repeat when finished -->
       poster="thumbnail.jpg"  <!-- image shown before play -->
       preload="metadata">     <!-- load only metadata -->
</video>

Embed YouTube Video

For YouTube videos, use <iframe>. Go to any YouTube video → Share → Embed, and copy the code:

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

<!-- Responsive YouTube (maintain 16:9 ratio) -->
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden">
  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%"
          src="https://www.youtube.com/embed/VIDEO_ID"
          allowfullscreen></iframe>
</div>

HTML5 Audio

HTML
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  <p>Your browser doesn't support audio.</p>
</audio>

Best Format Choices

Reference
Video: MP4 (H.264) — supported everywhere. Also offer WebM for smaller size.
Audio: MP3 — universal support. OGG as fallback.
Always provide 2 formats with <source> for maximum browser compatibility.