HTML <video> Element
The <video> element embeds video content directly in an HTML document. It can provide built-in playback controls, multiple video sources, poster images, captions, subtitles, and other options for presenting video on a webpage.
Syntax
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Attributes
The <video> element supports the global HTML attributes and the following element-specific attributes:
| Attribute | Description |
|---|---|
autoplay |
Specifies that the video should begin playing automatically when possible. Browsers commonly restrict autoplay unless the video is muted or other requirements are met. |
controls |
Displays the browser's built-in video controls, such as play, pause, volume, seeking, and fullscreen controls where supported. |
controlslist |
Provides hints about which controls the browser should make available when its built-in media controls are displayed. |
crossorigin |
Specifies how the browser should handle cross-origin requests when retrieving the video resource. |
disablepictureinpicture |
Requests that the browser not offer a Picture-in-Picture option for the video. |
height |
Specifies the height of the video's display area in CSS pixels. |
loop |
Specifies that the video should automatically begin playing again after it reaches the end. |
muted |
Specifies that the video's audio output should initially be muted. |
playsinline |
Indicates that the video should play within the page rather than automatically entering a fullscreen playback mode. |
poster |
Specifies an image to display before the video begins playing or while the video data is unavailable. |
preload |
Provides a hint about how much video data the browser should load before playback begins. Values include none, metadata, and auto. |
src |
Specifies the URL of the video resource. Multiple alternative resources can instead be provided with nested <source> elements. |
width |
Specifies the width of the video's display area in CSS pixels. |
Example
This example embeds a video with browser playback controls and uses a <source> element to identify the video resource and its media type.
<video controls width="500">
<source src="example-video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Usage Notes
A video resource can be specified directly with the src attribute or through one or more nested <source> elements. Using <source> elements allows alternative video resources to be supplied when different formats are needed.
The controls attribute provides the browser's built-in playback interface. If it is omitted, you must provide another suitable way for users to control playback when controls are necessary.
Autoplay should be used carefully. Browsers commonly block videos with audible autoplay, and automatically playing media can be distracting or disruptive. Muted video is more likely to be permitted to autoplay.
Use the <track> element to associate timed text tracks such as captions, subtitles, descriptions, chapters, or metadata with the video.
Accessibility
Videos containing meaningful spoken dialogue or other important audio should provide synchronized captions. When important information is communicated visually and is not available through the audio, provide an appropriate audio description or another accessible alternative. Users should also be able to control playback and audio rather than being forced to watch or listen to automatically playing media.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <video> Element .
Related Elements
The <video> element is related to other media elements, including <audio> for audio content, <source> for alternative media resources, and <track> for timed text tracks such as captions and subtitles.
Specifications
The <video> element is defined in the WHATWG HTML Living Standard .
