Path // www.yourhtmlsource.com → Reference → <VIDEO> ELEMENT

<video> element

The <video> element embeds video content in documents. It supports multiple video sources for browser compatibility, provides native playback controls, and offers a JavaScript API for custom video players. The element replaced the need for third-party plugins like Flash for video playback.

Page Navigation:
Syntax | Attributes | Examples | When to Use | Related Elements

This page was last updated on 2025-11-17

Syntax

The <video> element can include fallback content and multiple sources:

<video src="movie.mp4" controls width="640" height="360">
Your browser does not support the video element.
</video>

Key Attributes

src — The URL of the video file. Can be omitted if using <source> elements inside.
controls — Boolean attribute. Displays the browser’s default video controls (play/pause, volume, fullscreen, seek bar).
width — The display width of the video in pixels.
height — The display height of the video in pixels.
poster — URL of an image to show while the video is downloading or until the user plays it.
autoplay — Boolean attribute. Video begins playing automatically. Most browsers block this unless muted is also set.
muted — Boolean attribute. Starts the video muted. Required for autoplay to work in most browsers.
loop — Boolean attribute. Video restarts automatically when it reaches the end.
preload — Hints how much of the video to preload. Values: none, metadata, or auto.
playsinline — Boolean attribute. Plays video inline on mobile devices instead of automatically going fullscreen.
crossorigin — Configures CORS requests for the video. Values: anonymous or use-credentials.

Examples

Basic Video with Controls and Poster

<video controls poster="thumbnail.jpg" width="640" height="360">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video element.
</video>

The poster image provides a preview before the video plays, improving the user experience.

Multiple Sources for Browser Compatibility

<video controls width="640" height="360">
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
<p>Your browser doesn’t support HTML video.
<a href="movie.mp4">Download the video</a> instead.</p>
</video>

The browser uses the first source it can play, ensuring compatibility across different browsers.

Video with Captions

<video controls width="640" height="360">
<source src="interview.mp4" type="video/mp4">
<track src="captions.vtt" kind="captions" srclang="en" label="English" default>
Your browser does not support the video element.
</video>

The <track> element provides captions for accessibility and better user experience.

When to Use

Accessibility Considerations:

Always provide captions or subtitles using the <track> element
Include audio descriptions for visually impaired users when important visual information isn’t in the dialogue
Provide the controls attribute so users can pause and control playback
Avoid autoplay, especially with sound, as it can be disruptive
Use the poster attribute to give context before video loads
Ensure keyboard accessibility if building custom controls

Best Practices: