htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

<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 and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

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

Unavailable or blocked: media “movie.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

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

Video with Controls

Add playback controls to the video:

Example

Unavailable or blocked: media “movie.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: media “movie.mp4”; media “movie.webm”; media “movie.ogg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: image “thumbnail.jpg”; media “movie.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: media “background.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

The snippet includes CSS inside its HTML. Unavailable or blocked: media “movie.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: media “movie.mp4”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<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

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

video {
  display: inline;
}

Related Tags