HTML · Quick Reference

Lesson 27 — HTML Video Cheat Sheet

HTML

In one line: The most important video attribute beyond controls is poster — the image shown before playback starts. Without it, the video shows a black frame (or the first frame) while loadi...

Key Ideas

1The video Element. The most important video attribute beyond controls is poster — the image shown before playback starts. Without it, the video shows a black frame (or the first frame) w...

2Video Formats & Attributes FormatMIME typeChromeFirefoxSafariNotes MP4 / H.264video/mp4YesYesYesUniversal — safest single format WebM / VP9video/webmYesYes14.1+Smaller than MP4 at same quality OGG / Theoravideo/oggYesYesNoOutdated — avoid Strategy: Encode WebM (VP9) as the first <source> (smaller file, Chrome/Firefox pick it) and MP4 (H.264) as the fallback (Safari + universal compatibility). controlsbooleanShows native play/pause, seek bar, volume, fullscreen posterURL stringImage shown before playback starts — use a custom thumbnail autoplaybooleanBlocked by browsers unless muted is also present mutedbooleanStarts muted. Required to allow autoplay loopbooleanRestarts video when it ends playsinlinebooleaniOS: plays in-page instead of fullscreen. Required for background/looping videos on iPhone preload"none"|"metadata"|"auto"Download hint. Use "metadata" for videos above the fold width / heightinteger (px)Intrinsic dimensions — reserve space, prevent layout shift Section 3 Captions with <track>. The <track> element adds synchronized text to a video. Captions are mandatory for accessibility compliance (WCAG 2.1 AA, ADA). The file format is WebVTT (.vtt) —...

3Responsive Video. By default <video> is a fixed-width element. To make it fluid — expanding to fill its container while maintaining aspect ratio — use the modern aspect-ratio CSS ...

Code Examples

<video
  controls
  poster="thumbnail.jpg"
  width="800"
  height="450"
  preload="metadata">

  <!-- Sources — browser picks the first it supports -->
  <source src="lesson.webm" type="video/webm">
  <source src="lesson.mp4"  ...

WEBVTT

00:00:00.000 --> 00:00:03.500
Welcome to Lesson 27 — HTML Video.

00:00:03.600 --> 00:00:07.200
In this lesson we'll cover the video element,
formats, and captions.

00:00:07.300 --> 00:00:10.000
Let's get started.

<!-- HTML -->
<div class="video-wrap">
  <video controls poster="thumb.jpg"
         width="1280" height="720">
    <source src="video.webm" type="video/webm">
    <source src="video.mp4"  type="video/mp4">
  </video&g...