How to Insert Video in HTML

In this article, we’ll learn which tag we use to create a video element in HTML, as well as the attributes that define how the video will behave.

Now, revealing the secret, to add videos to an HTML document, you need to use the video tag. First, we create the video tag and then add the controls attribute to display a playback control.

Next, we add the tag with the path to the video file.

An interesting detail: we can also add more than one file with a different extension as a security measure, HTML will consider the first supported file.

In this case, we’ll add a file with the .mp4 extension. If the file isn’t supported or has a problem, HTML will consider the next supported file.

Finally, if none of the files are supported in the browser, we can display a text message informing the user of the error.

The video files supported by the browser are:

We also use the type attribute in the tag to inform the browser of the file type being used, it’s a good way to maintain semantic HTML.

This will be the result:

Video Tag Attributes

In addition to the controls attribute, we can include other attributes in the tag:

• muted specifies that the video is muted
• loop specifies that the video plays in a loop
• autoplay specifies that the video plays automatically
• poster displays an image while the video is loading or until the user presses play

In the code above, we added the poster attribute that displays an image until the user plays the video. This is the result:

This article covered

Author

Daniel Nogueira
LinkedIn