Skip to content
Tutorial Reference

HTML Video

Learn how to embed videos in HTML using the <video> element, including attributes like controls, autoplay, poster, and supported formats (MP4, WebM, Ogg).

The HTML <video> element is used to show a video on a web page.

HTML Video Tags

Tag Description
<video> Defines a video or movie
<source> Defines multiple media resources for media elements, such as <video> and <audio >
<track> Defines text tracks in media players

The HTML <video> Element

To show a video in HTML, use the <video> element:

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

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format.

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

Attributes of HTML Video Tag

Attribute Description
controls It defines the video controls which is displayed with play/pause buttons.
height It is used to set the height of the video player.
width It is used to set the width of the video player.
poster It specifies the image which is displayed on the screen when the video is not played.
autoplay It specifies that the video will start playing as soon as it is ready.
loop It specifies that the video file will start over again, every time when it is completed.
muted It is used to mute the video output.
preload It specifies the author view to upload video file when the page loads.
src It specifies the source URL of the video file.

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

<video width="320" height="240" autoplay>  
	<source src="movie.mp4" type="video/mp4">  
	<source src="movie.ogg" type="video/ogg">  
	Your browser does not support the video tag.  
</video>

Add muted after autoplay to let your video start playing automatically (but muted):

<video width="320" height="240" autoplay muted>  
	<source src="movie.mp4" type="video/mp4">  
	<source src="movie.ogg" type="video/ogg">  
	Your browser does not support the video tag.  
</video>

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The browser support for the different formats is:

Browser MP4 WebM Ogg
Edge ✔️ ✔️ ✔️
Chrome ✔️ ✔️ ✔️
Firefox ✔️ ✔️ ✔️
Safari ✔️ ✔️ ❌
Opera ✔️ ✔️ ✔️

MIME Types for HTML Video format

The available MIME type HTML video tag is given below.

Video Format MIME Type
mp4 video/mp4
ogg video/ogg
webM video/webM

`

Navigation