The HTML <video> element allows you to embed video content — such as movie clips, tutorials, or animations — directly into a web page.
Use the <video> tag with a src attribute and the controls attribute to show the play/pause buttons:
<video src="video.mp4" controls></video>controls attribute, the video player is invisible with no way for the user to play it. Always add controls for normal use.
| Attribute | Description |
|---|---|
src | Path or URL to the video file |
controls | Shows built-in play/pause/volume/fullscreen controls |
autoplay | Starts playing automatically (often requires muted) |
loop | Repeats the video indefinitely |
muted | Starts video with no sound |
poster | Image shown before the video plays (thumbnail) |
preload | Hints how much to preload: auto, metadata, none |
width / height | Sets the video player dimensions in pixels |
Different browsers support different video formats. Use <source> tags inside <video> to provide fallbacks:
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
Your browser does not support the video element.
</video>The browser plays the first format it supports and ignores the rest. The text at the bottom shows only if video is completely unsupported.
| Format | MIME Type | Browser Support |
|---|---|---|
| MP4 (.mp4) | video/mp4 | All modern browsers ✓ |
| WebM (.webm) | video/webm | Chrome, Firefox, Opera |
| OGG (.ogg) | video/ogg | Chrome, Firefox, Opera |
The poster attribute specifies an image to show while the video is downloading or before the user presses play:
<video controls poster="thumbnail.jpg" width="640">
<source src="movie.mp4" type="video/mp4">
</video>Most browsers block autoplay with sound. To autoplay, you must also add muted:
<!-- Autoplays silently (muted required) -->
<video src="intro.mp4" autoplay muted loop width="100%"></video>You can set the video dimensions using the width and height attributes (in pixels), or use CSS for responsive sizing:
<!-- HTML attributes -->
<video src="video.mp4" controls width="640" height="360"></video>
<!-- CSS for responsive full-width -->
<style>
video {
width: 100%;
height: auto;
}
</style>width and height to prevent layout shifts while the video loads. If you only set width, the height will scale automatically to maintain the aspect ratio.