<video>

Syntax

<video src="movie.mp4" controls width="640"></video>

Examples

<video controls playsinline preload="metadata" width="640" style="max-width: 100%; height: auto;">
  <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<video controls playsinline preload="metadata" width="640" style="max-width: 100%; height: auto;">
  <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
  <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
  Your browser does not support HTML5 video.
</video>

<video controls autoplay muted loop playsinline width="640" style="max-width: 100%; height: auto;">
  <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
</video>

Attributes

• controls (boolean): Shows the browser's built-in playback controls
• autoplay (boolean): Starts playback automatically (most browsers require muted for this to work)
• loop (boolean): Restarts the video automatically when it ends
• muted (boolean): Mutes audio by default
• poster (URL): An image shown before playback starts

Best practices

• Always include the controls attribute unless you have a very specific reason to hide them — autoplay-only videos are a poor user experience
• Autoplay only works reliably in most browsers when combined with muted
• Provide multiple <source> formats (MP4, WebM) for cross-browser compatibility
• Include fallback text between the tags for very old browsers that do not support <video>
• Use the poster attribute to show a meaningful thumbnail before playback

Browser compatibility

Related HTML documentation

Specifications & further reading

• HTML Living Standard