In this section, we will learn what HTML <video> element is and how to use it.

HTML for Video: What is <video> Tag in HTML?

HTML <video> element is used when we want to add (embed) a video player to a document.

As you’ll see in the rest of this section, HTML <video> play has attributes to bring an external video file, set the controllers on a video player, setting the width and height and a couple of other attributes that help to manage a video player and video files.

HTML <video> Tag Syntax:

<video src = “video address”> content </video>

HTML <video> Tag Values:

The value we set for the body of HTML <video> element is usually a text description that will only be displayed if the target browser does not support HTML <video> element. (Perhaps only those super old browsers might not know what HTML <video> element is!)

Example: HTML tag for video

See the Pen HTML tag for video by Omid Dehghan (@odehghan) on CodePen.

Example: HTML to play video

See the Pen HTML to play video by Omid Dehghan (@odehghan) on CodePen.

HTML <video> and <source> elements:

Not all browsers capable of displaying all sorts of video formats! For this reason, we need to supply multiple formats of our video on a page to help browsers to pick the format that they can display.

This is where we use the <source> element within the body of <video> element to set the source and the format of our video. (Check the <source> element section for more information)

In the example above, we supplied two formats for our video. In this case, browsers start with the first video format (mp4 in this example) and check to see if they can display that format. If yes, then they will pick that and start to download the video and display it to users and won’t go to the next format anymore.

Note: when using <source> element, you don’t need to set the src attribute of the <video> element anymore.

HTML <video> Tag Attributes

Here’s the list of attributes belong to HTML <video> element:

Name	Description
autoplay	Using this attribute means the target video player should play the video file as soon as the page is loaded.
controls	This attribute is used when we want the controllers of the target video player to be displayed.
height	Using this attribute, we can set the height of the target video player.
loop	Using this attribute means the video player should replay the target video file after it’s being ended.
muted	Using this attribute means the video player should be set to muted by default when the page is loaded.
poster	With this attribute, we can set a picture as the first thing users see before they hit the play button.
preload	Using this attribute, we can set when the loading of the target video file should start in an HTML document.
src	With this attribute, we can set the source of the target video file that we want to play in our video player.
width	This attribute is used to set the width of the video play in an HTML document.