media
<video>
Embeds a video player in the page, with native browser controls and multiple source support. Use it for self-hosted or CDN-hosted video instead of Flash or heavy JS players.
<video src="clip.mp4" controls poster="cover.jpg"></video>Common attributes
| Attribute | Purpose |
|---|---|
| src | Video URL (or use <source> children) |
| controls | Show native play/pause/volume UI |
| autoplay | Start playing automatically (needs muted on most browsers) |
| muted | Start with audio muted |
| loop | Restart when the video ends |
| poster | Placeholder image shown before playback |
| preload | none | metadata | auto — how much to prefetch |
| playsinline | Play inline on iOS instead of fullscreen |
Examples
<video src="demo.mp4" controls poster="cover.jpg" width="640"></video>Simple video with a poster frame
<video controls><source src="v.webm" type="video/webm"><source src="v.mp4" type="video/mp4">Fallback text.</video>Multiple formats for cross-browser support
<video autoplay muted loop playsinline src="bg.mp4"></video>Silent looping background video (iOS-safe)
Gotcha
Autoplay requires muted (and often playsinline) or browsers will block it. Always provide captions via
Related tags
<img>
Embeds a raster or vector image into the document. Use it for content images; use CSS background-image for purely decorative visuals.
<iframe>
Embeds another HTML document inside the current page. Use it for third-party embeds (maps, videos, payments) — but treat every iframe as untrusted and sandbox where possible.
<svg>
Inline vector graphics that scale losslessly and can be styled and animated with CSS or JS. Use it for icons, logos, charts, and any illustration that must stay crisp at any size.