HTML <video> (Video) Tag

❮ Previous Reference Next ❯


<video width="340" height="260" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Your browser does not support the video tag.


The <video> element embeds a video into a document.

The attributes (controls, preload, loop) go inside <video> tag to change the behavior of the embedded video.

Browsers that support HTML5 video will play the media without the need for external plugins.

The video formats is made up by a video stream + audio stream.

The three common formats for HTML5 video are: MP4, WebM and OGG Vorbis.

.mp4 = H.264 + AAC
.ogg = Theora + Vorbis
.webm = VP8 + Vorbis

MIME Types:

Addition to declaring multiple encodings, the web server also needs to be instructed.

See MIME types to find more information about MIME types and Setting up MIME types on your server for more information regarding server setup to deliver HTML5 audio and video content.

What about old browsers?

There are several techniques to ensure that people will be able to access the content we’ve created. Two of them are covered here: Chrome Frame and Flash Fallback.

Chrome Frame:

ChromeFrame is a plugin for Internet Explorer (up to version 8) that will allow the older browsers to work with HTML5 content (not just video and audio) as if it supported the features natively.

Flash fallback:

You can also use flash as a fallback for when the browser does not support any of the provided formats.

Flash supports H264 and Adobe has committed to support the WebM format in their flash player although that time timeline is still not clear.

Note: The biggest drawback using Flash as opposed to the Chrome Frame plugin is that you will get the flash player interface instead of whatever UI you built for your video tag.

Fallback Tip:

<video width="320" height="240" controls="controls" preload="none">
  <source src="movie.mp4" type="video/mp4"/>
  <source src="movie.ogg" type="video/ogg"/>
  <source src="movie.webm" type="video/webm"/>
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240"/>

Tip: Use <source> element for cross browser support

Browser Compatibility

Format Chrome Edge Firefox Safari Android AndroidTV Kodi Roku
MP41 Yes Yes Yes Yes Yes Yes Yes Yes
MKV2, 3 Yes Yes No N/A Yes Yes Yes Yes
WebM3, 5 Yes Yes Yes N/A N/A N/A Yes Yes
TS4 Yes Yes Yes Yes Yes Yes Yes Yes
OGG5 Yes Yes Yes No Yes Yes Yes Yes

Version: HTML5

Standard Syntax


Browser Support



Attribute Value Description
autobuffer autobuffer autobuffer attribute specifies the browser should begin buffering a video right away. This attribute should be used if it is assumed the user will play the video.
autoplay autoplay This Boolean attribute specifies that the video will automatically start playing as soon as it can do so without stopping to finish loading the data.


autopictureinpicture Specifies that the element should automatically toggle picture-in-picture mode when the user switches back and forth between this document and another document or application.


Specified the browser select what controls to show on the media element whenever the browser shows its own set of controls.
controls controls Specifies the browsers will display controls to allow the user to control video playback, such as play/pause, volume, etc.
crossorigin anonymous
Specifies whether to use CORS to fetch the related video. CORS-enabled resources can be reused in the <canvas> element without being tainted.


disablepictureinpicture Specifies prevents the browser from suggesting a Picture-in-Picture context menu or to request Picture-in-Picture automatically in some cases.


disableremoteplayback Specifies to disable the capability of remote playback in devices that are attached using wired (HDMI, DVI, etc.) and wireless technologies (Miracast, Chromecast, DLNA, AirPlay, etc).In Safari, you can use x-webkit-airplay="deny" as a fallback.
height pixels Sets the height of the video display area.
loop loop Specifies that the video will automatically start over again, upon reaching the end.
muted muted Specifies whether the video will be initially silenced. The default value is false, meaning that the audio will be played when the video is played.
playsinline playsinline Specifies that the video is to be played "inline", that is within the element's playback area.
poster URL Specifies an image to be shown while the video is downloading, or until the user hits the play button. If this attribute isn't specified, nothing is displayed until the first frame of the video is available; then the first frame is displayed as the poster.
preload emptyString
Specifies a hint to the browser about whether to download of the video itself or its metadata. The autoplay attribute can override this attribute, because if you want to automatically play a video, the browser will obviously need to download it.
src URL Specifies the location of the video file to embed. Alternatively, you can use the preferred <source> tag as it allows for multiple options.
width pixels specifies the width of the video display area.

Global Attributes

<video> element also supports the Global Attributes in HTML.

Event Attributes

<video> element also supports the Event Attributes in HTML.

By Default CSS Value(s)


❮ Previous Reference Next ❯