The <video> element
The <video> tag embeds video content directly in the page, with built-in browser controls when the controls attribute is set. Point it at a single file with src, or offer multiple formats via nested <source> tags so the browser picks one it supports.
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, embedded content |
| Content model | If src is set: fallback content for unsupported browsers. If not: one or more <source> elements, then fallback content |
| Tag omission | Neither the start nor end tag can be omitted |
| Permitted parents | Any element that accepts embedded content |
| DOM interface | HTMLVideoElement |
Syntax
Live example
Uses “Big Buck Bunny” (Blender Foundation, CC BY 3.0) as a public sample video.
Attributes
| Attribute | Description |
|---|---|
| src | Path or URL to the video file (omit if using nested <source> elements) |
| controls | Shows the browser’s built-in play/pause/volume controls |
| autoplay | Starts playback automatically — most browsers require muted alongside it |
| loop | Restarts playback automatically when it ends |
| muted | Starts the video with sound off |
| poster | Image shown before playback starts |
| width / height | Display dimensions in pixels |
Common examples
A video with controls and a poster image
The poster is shown before playback starts; preload="metadata" avoids downloading the whole file up front.
A silent background video
Autoplay only works reliably when the video is muted; playsinline stops iPhones from opening it full screen.
Captions with a text track
Add a WebVTT file with <track> so viewers can turn on subtitles.
<video> vs embedding YouTube
With the <video> tag you host the file yourself: you control the player, there is no third-party branding or tracking, and the video is always available. The cost is bandwidth and storage, and you need to prepare the files (compression, formats, captions) yourself.
Embedding a YouTube or Vimeo video with an <iframe> hands the hosting, streaming quality and compression to the platform, and your video can also be found on that platform. For short clips, background loops and product animations, <video> works well; for long videos you want watched and shared, embedding is usually easier.
| <video> | YouTube embed | |
|---|---|---|
| Hosting cost | Yours | Free (platform) |
| Player control | Full | Limited |
| Best for | Short clips, loops | Long videos, reach |
Common mistakes to avoid
- Autoplay with sound. Browsers block it. Add
muted, or let the visitor press play. - No controls. Without
controls, visitors can’t pause, seek or change the volume (unless you build your own controls). - Huge video files on your own hosting. Large videos are slow and costly to serve; compress them or host them on a video platform and embed it with an <iframe>.
- No captions. Many people watch with the sound off; captions also make your video accessible to deaf and hard-of-hearing viewers.
Accessibility & SEO tips
- Provide captions with
<track>and, for important videos, a text transcript on the page — search engines can read text but not speech. - Never autoplay video with sound, and make sure moving background video can be paused.
- Make videos responsive with
video { width: 100%; height: auto; }and keep the width and height attributes to avoid layout shift. - Compress videos before uploading and keep background loops short (a few seconds), so they don’t slow the page down on mobile data.
Browser support
Supported in all modern browsers. MP4 (H.264 video) plays everywhere; WebM is a smaller open format supported by all current browsers, so offering both covers every visitor.
Tutorial: How to embed a YouTube video