The video element works much like audio, with a picture.
index.html
HTML
<video controls width="640" poster="trailer-cover.jpg" preload="metadata">
<source src="trailer.mp4" type="video/mp4">
<source src="trailer.webm" type="video/webm">
<track kind="captions" src="trailer.en.vtt" srclang="en" label="English">
Your browser does not support video. <a href="trailer.mp4">Download the trailer</a>.
</video>Key attributes
| Attribute | Purpose |
|---|---|
controls | Show the player |
poster | Image shown before the video plays |
width, height | The player size |
preload | How much to download early (metadata is a good default) |
playsinline | Keep video inside the page on iPhones |
muted, loop | Silent start, repeat |
Captions with track
track adds captions, subtitles or descriptions from a WebVTT (.vtt) text file. Captions are essential for deaf and hard-of-hearing visitors, and are useful for anyone watching with the sound off.
Autoplay rules
Browsers allow autoplay only for muted video. Use it sparingly, for decorative loops, and never for important content.
Make video responsive
style.css
CSS
video { max-width: 100%; height: auto; }
warning
Large video files in the page
A video can be many megabytes. Compress it, set
preload="metadata", and think about using a video hosting service for long content.