HTML Video Tag: How To Embed Video In HTML Document

  • Post category:HTML
  • Post author:
  • Post last modified:April 15, 2022
  • Reading time:8 mins read
You are currently viewing HTML Video Tag: How To Embed Video In HTML Document

HTML video tag allows developers to embed video on your document in a simple way, without any flash player it can embed. A video in HTML document increases the website user experience.

An HTML video tag embeds a media player which supports video playback on your HTML document with video playback all controls.

Embed a video in your HTML document is not a tough matter. The embed video makes your webpage more attractive, easy to understand, and beautiful. With video, you can express those things that can not produce in text format.

In this tutorial, we will learn how to embed video In HTML using a video tag. HTML video tag was introduced in HTML5 version (2015). Before HTML5 developers use flash players to play a video.

HTML Video Tag – Syntax

In HTML The video element starts with the <video> tag and closed with the </video> tag. And the source file of the video can be defined with the src attribute or using the source element. And you can write the optional text if the browser does not support the video element the text will be shown there.

<video>
  </video>

HTML Video – Example

Here is an example of the HTML video tag. As mention above the video tag starts with <video> tag and closed with </video> tag.

<video controls src="file_path" width=300px>
Oops! Your browser does not support this video.
</video>

<!-- OR YOU CAN WRITE THIS-->

<video controls width=300px>
<source src="file_path">
</video>

HTML Video Tag- Attributes

  1. controls – This attributes adds control buttons like play/pause and volume buttons.
  2. src – The src attribute defines the source path of the video like the image source.
  3. autoplay – this attribute specifies that the video automatically played when the page successfully loaded.
  4. loop – If the loop attribute is present the video will be automatically played as soon as it finishes.
  5. width – The width attribute specifies the width of the video.
  6. height – And also the height attribute defines the height of the video.
  7. poster – The poster attribute adds a thumbnail for the video.
  8. muted – This attribute defines that the audio should be silent when the video playing.
HTML video tag

Video element – controls attribute

The controls attribute defines the control button for the particular video. The control button means the play button, pause button, volume controller, and full-screen mode button.

<video controls>
<source src="source_file">
</video>

Video Tag- src Attribute

As we already know the src attribute is always used to define the source file. However, you can define the source under the video tag or you can specify it under the source tag. Let’s see the below example.

<video controls src="file_path">
<!--OR SPECIFY UNDER THE SOURCE TAG-->
<source src="source_file">
</video>

Video Tag- autoplay Attribute

If the autoplay attribute is present under the video tag then the video automatically played when the browser completely loads the document.

<video controls autoplay>
<source src="source_file">
</video>&lt;video controls autoplay&gt;
&lt;source src="source_file"&gt;
&lt;/video&gt;

Video Tag – loop Attribute

the loop attribute specifies that the video will be played again as soon as it finishes.

<video controls loop>
<source src="source_file">
</video>

Video Tag- width Attribute

The width attribute defines the width of the video. This attribute support only the pixel value.

<video controls width=500px>
<source src="source_file">
</video>

Video Tag Height attribute

The height attribute specifies the height of the video. This attribute value also supports pixel value. we recommend just setting the width attribute value browser automatically sets the height.

<video controls height=500px>
<source src="source_file">
</video>

HTML Video – poster Attribute

The poster attribute set the thumbnail of the video. if you notice when the video was loaded there was a black area if you set the thumbnail the image will show there when the video load.

<video controls poster="poster_image.jpeg">
<source src="source_file.mp4">
</video>

HTML Video – mute attribute

The mute attribute defines the sound of the video will be silence.

<video controls mute>
<source src="source_file.mp4">
</video>

Chapter Summary

  • Video tag in HTML is used to embed video in HTML.
  • HTML video tag start with <video> tag and closed with </video> tag and the video source are defined with the <source> tag.
  • HTML video tag support all global attribute and support all event attribute.

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply