Video

You can embed a video in your HTML page by using the video tag. The video tag has many attributes that can be used to customize the experience. Let's go through each one of them.

We all love video.

src

Embedding video is pretty easy. Simply use a video tag and give it a src attribute. The src attribute is where you tell the browser where to find the video. The src attribute can be a URL or a path to a local file. Let's see how to embed a video on our page.

HTML
<video src="video.mp4" />

fallback

When the browser does not support the video tag, it will display the content inside of the video tag. This is called a fallback. Simply add text in between the video tags. This text will be displayed when the browser does not support the video tag. Let's see how to do that.

HTML
<video src="video.mp4">
    This browser does not support this tag.
</video>

controls

By default, the browser will not show any controls like volume, play/pause, etc. To show the controls, simply add the controls attribute. This is a boolean so you can use true or false. Let's see how to add the controls to our video.

HTML
<video src="video.mp4" controls="true">
    This browser does not support this tag.
</video>

poster

By default, the first image of a video will be the first frame of the video in the src attribute. To change this, you can use the poster attribute. This is a string that points to an image. Let's see how to change the poster image of a video.

HTML
<video src="video.mp4" poster="video-poster.jpg">
    This browser does not support this tag.
</video>

type

You can specify the type of the video by using the type attribute. This tells the browser the video's MIME type. This is a string that can be video/mp4, video/ogg, video/webm, etc. Let's see how to change the type of a video.

HTML
<video src="video.mp4" type="video/mp4">
    This browser does not support this tag.
</video>

autoplay

A video will not play automatically when it is loaded. To play the video automatically, you can use the autoplay attribute. This is a boolean so you can use true or false. Let's see how to play the video automatically.

HTML
<video src="video.mp4" autoplay="true">
    This browser does not support this tag.
</video>

muted

You can control whether the video is muted or not by using the muted attribute. This is a boolean so you can use true or false. Sometimes this attribute is needed to autoplay the video in some browsers. Let's see how to mute the video at the start.

HTML
<video src="video.mp4" muted="true">
    This browser does not support this tag.
</video>

loop

You can infinitely loop the video by using the loop attribute. This is a boolean so you can use true or false. If it is not set, the video will play once and then stop. Let's see how to loop the video.

HTML
<video src="video.mp4" loop="true">
    This browser does not support this tag.
</video>

width and height

You can control the width and height of the video by using the width and height attributes. These are both integers. Let's see how to change the width and height of the video.

HTML
<video src="video.mp4" width="640" height="480">
    This browser does not support this tag.
</video>

Adding multiple sources

You can add multiple sources to a video by using source tags. Each tag must have a src attribute and a type attribute. The browser will then choose the best source to play. Let's see how to add multiple sources to our video.

HTML
<video width="640" height="480" poster="poster.png">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    <source src="video.webm" type="video/webm">
</video>

Default HTML video player.

Resources

• Video Element - MDN Web Docs

• Support Us
• Discord
• Share
• Post
• Share