<video>

Published Jun 20, 2021Updated Jun 14, 2023

The <video> element represents an interface for adding video content to the page.

Syntax

<!-- Surrounding source tag -->
<video>
  <source src="filename.mp4" type="video/mp4" />
  <h3>Fallback text if video will not play</h3>
</video>

<!-- With src attribute -->
<video src="filename.mp4">
  <h3>Fallback text if video will not play</h3>
</video>

The <video> element may include <source> elements and fallback text.

Sources are written in preference order, so that the first source listed is played if the browser supports it, with the subsequent sources acting as a fallback. This is usually used to try newer video formats while also providing a fallback for better compatibility.

Attributes

Videos can have various attributes that are added in the opening <video> tag:

Attribute	Type	Description
`autoplay`	Boolean	Plays the video automatically once it has loaded.
`controls`	Boolean	Browser offer playback controls to the user.
`loop`	Boolean	Replays the video again once it has finished.
`muted`	Boolean	Ensures there will be no audio output.
`poster`		Provides a thumbnail for the video, specifying an image’s file path.
`height`		Controls the height dimensions of the video element (in pixels).
`width`		Controls the width dimensions of the video element (in pixels).
`src`		Provides the URL for the video that should be shown to the user.

Attributes can be used together in any order to specify how a video behaves on a webpage.

Examples

The following example shows the <video> element being used with embedded <source> element:

<html>
  <head> </head>
  <body>
    <video controls height="480" poster="code_ninja.jpg">
      <source type="video/webm" src="code_ninja.webm" />

      Sorry you can't watch this video in your browser. Click
      <a href="code_ninja.webm">here</a> to download it, instead.
    </video>
  </body>
</html>