← Back to All Tags

<video>

Embeds video content in an HTML document

✨ HTML5

Definition and Usage

The <video> tag is used to embed video content in a web page, such as a movie clip or other video streams.

The <video> tag contains one or more <source> tags with different video sources. The browser will choose the first source it supports.

The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> element.

Tip: For better cross-browser compatibility, always provide multiple video formats (MP4, WebM, Ogg) using the <source> element.
Note: There are three supported video formats for the <video> element: MP4, WebM, and Ogg. MP4 has the widest browser support.

Browser Support

The <video> tag is supported in all major browsers:

Chrome
Chrome
4.0+
Firefox
Firefox
3.5+
Safari
Safari
4.0+
Edge
Edge
9.0+
Opera
Opera
10.5+

Attributes

Attribute Value Description
src URL Specifies the URL of the video file
controls controls Specifies that video controls should be displayed (play, pause, volume, etc.)
autoplay autoplay Specifies that the video will start playing as soon as it is ready
loop loop Specifies that the video will start over again, every time it is finished
muted muted Specifies that the audio output of the video should be muted
poster URL Specifies an image to be shown while the video is downloading, or until the user hits play
preload auto
metadata
none		 Specifies if and how the video should be loaded when the page loads
width pixels Sets the width of the video player
height pixels Sets the height of the video player
playsinline playsinline Specifies that the video should play inline on mobile devices (not fullscreen)
crossorigin anonymous
use-credentials		 Specifies how the element handles cross-origin requests

The <video> tag also supports the Global Attributes in HTML.

The <video> tag also supports the Event Attributes in HTML.

Examples

Basic Video

Embed a simple video with a single source:

Example

<video src="movie.mp4" controls>
  Your browser does not support the video tag.
</video>

Video with Controls

Add playback controls to the video:

Example

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

Multiple Video Sources

Provide multiple formats for better browser compatibility:

Example

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
Tip: The browser will use the first recognized format. Place the most widely supported format (MP4) first.

Video with Poster Image

Display a thumbnail image before the video plays:

Example

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

Autoplay Muted Video

Create an autoplay video (must be muted for most browsers):

Example

<video width="640" height="360" autoplay muted loop playsinline>
  <source src="background.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
Note: Most modern browsers require the muted attribute for autoplay to work. This is to prevent unwanted audio from playing automatically.

Responsive Video

Create a responsive video that maintains aspect ratio:

Example

<style>
  .video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }

  .video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<div class="video-container">
  <video controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

Video with Subtitles/Captions

Add accessibility with subtitle tracks:

Example

<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Spanish">
  Your browser does not support the video tag.
</video>

Try it Yourself

Interactive Example

Example of a video placeholder with controls:

Video Formats

There are three supported video formats for the <video> element:

Format MIME Type Browser Support
MP4 video/mp4 Chrome, Firefox, Safari, Edge, Opera (Best compatibility)
WebM video/webm Chrome, Firefox, Edge, Opera
Ogg video/ogg Chrome, Firefox, Opera
Recommendation: Use MP4 format with H.264 codec for the widest browser support. Provide WebM as an alternative for open-source preference.

Accessibility

  • Always include controls: Use the controls attribute to provide playback controls
  • Add captions: Use <track> elements for subtitles and captions
  • Provide transcripts: Include text transcripts for deaf or hard-of-hearing users
  • Descriptive text: Add fallback content between <video> tags
  • Keyboard accessible: Ensure controls work with keyboard navigation
  • Don't autoplay with sound: Autoplay videos should be muted

Best Practices

  • Provide multiple video formats (MP4, WebM) for cross-browser compatibility
  • Always include the controls attribute for user control
  • Use the poster attribute to show a preview image
  • Include <track> elements for captions and subtitles
  • Optimize video file size for faster loading (compress videos)
  • Use appropriate preload values (none, metadata, auto)
  • For autoplay, always include muted and playsinline attributes
  • Set appropriate width and height to prevent layout shift
  • Consider lazy loading for videos below the fold
  • Provide fallback text for browsers that don't support video
  • Use responsive design techniques for mobile compatibility
  • Test video playback across different browsers and devices

Preload Attribute Values

  • auto: The browser should load the entire video when the page loads
  • metadata: The browser should load only metadata (dimensions, duration, etc.)
  • none: The browser should not load the video when the page loads
Tip: Use preload="metadata" for better page performance while still showing video duration and dimensions.

Default CSS Settings

Most browsers will display the <video> element with the following default values:

Default CSS

video {
  display: inline;
}

Related Tags