video: The Video Embed element

The <video> HTML element embeds a media player which supports video playback into the document. You can use <video> for audio content as well, but the <audio> element may provide a more appropriate user experience.

Attributes

Specific attributes

Required attributes

src="[URL]" specifies the URL of the video to embed. This is optional; you may instead use the <source> element within the video block to specify the video to embed in one or multiple formats.

Recommended attributes

controls if this attribute is present, the browser will offer controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.

Allowed attributes

height="[number]" specifies the height of the video’s display area, in pixels.

loop if specified, the browser will automatically seek back to the start upon reaching the end of the video.

muted indicates whether the video will be initially silenced. Its default value is false.

poster="[URL]" specifies an image to be shown while the video is downloading, or until the user hits the play button.

width="[number]" specifies the width of the video’s display area, in pixels.

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<video controls poster="/images/video-poster.jpg" width="640" height="360">
  <source src="/media/presentation.mp4" type="video/mp4">
  <source src="/media/presentation.webm" type="video/webm">
  <p>
    Your browser doesn't support HTML video.
    <a href="/media/presentation.mp4" download>Download the video</a> instead.
  </p>
</video>

<video controls muted loop width="320" height="240">
  <source src="/media/demo.mp4" type="video/mp4">
  <source src="/media/demo.ogg" type="video/ogg">
  <p>This browser does not support the video element.</p>
</video>