Native media needs no plugins — but browsers enforce rules (especially autoplay) that trip everyone up.
Video done right
<video controls width="640" poster="thumb.jpg" preload="metadata"> <source src="demo.webm" type="video/webm"> <source src="demo.mp4" type="video/mp4"> <track src="captions.vtt" kind="subtitles" srclang="en" label="English" default> Your browser doesn't support video. </video>
The autoplay rule
Browsers block autoplay with sound. Background hero videos need the full combo: autoplay muted loop playsinline — miss one and it won't play on mobile.
Responsive embeds (YouTube too)
.video-wrap { aspect-ratio: 16 / 9; }
.video-wrap iframe, .video-wrap video { width: 100%; height: 100%; }preload="metadata"loads only duration/dimensions — saves bandwidth- WebM is ~30% smaller than MP4; offer both
- Subtitles (.vtt files) are an accessibility + SEO win
Full lesson: Audio & Video.
← All Articles