<video>
Embeds a video in the page.
Syntax
<video src="file.mp4" controls></video>Attributes
| Parameter | Type | Description |
|---|---|---|
| src | URL | The video file address (or use `<source>`). |
| controls | — | Show the playback controls. |
| poster | URL | Optional. An image shown before playback. |
| autoplay, muted, loop | — | Optional. Autoplay (works only when muted) and looping. |
| playsinline | — | Optional. On iPhone, play inline instead of full screen. |
Examples
A video with controls and a poster:
<video controls width="320" poster="/media/photo-400x250.jpg">
<source src="/media/flower.webm" type="video/webm">
<source src="/media/flower.mp4" type="video/mp4">
</video>A background video: muted, looping, no controls:
<video src="/media/flower.mp4" autoplay muted loop playsinline width="320"></video>Notes
Browsers block autoplay with sound — autoplay only works together with muted. For responsiveness set max-width: 100%; height: auto; in CSS. Add subtitles with <track>.
See also
Related recipes
In the tutorial
- Audio and video — The video and audio tags, the controls panel, autoplay, looping, several formats with source and subtitles.