How to Add Video in HTML?
FREE
Overview
HTML allows us to play videos on a website using the <video> tag. The video is embedded into the web page by mentioning the video link in the src attribute inside the <source> tag. We can also use height and width to define the size of the video.
Pre-requisites for the Article
Before reading this article, it is advised to be comfortable with using paragraph tags (<p>), heading tags (<h1>, <h2>, ..., <h6>), <img> tag, <audio> tag and some knowledge of global attributes (like height and width).
You can still proceed with this article without knowing any of the above topics, it's just that you may have a hard time understanding the code examples.
What are We Creating?
We are trying to create a web page with a video embedded into it.
This is what the final output should look like. We can achieve this by using the <video> tag.
Head over to the next section to see how to add video in HTML.
How to Add Videos in HTML?
We can add videos in HTML by embedding the video link in the src attribute of the <video> tag. We can also embed Youtube videos in a web page using the <iframe> tag.
As we know that the src attribute is used inside the <video> but sometimes the video type is not supported by the browser, to solve this issue, we use multiple <source> tags and write the src attribute inside them to link different types of video files. The browser will use the first link it can recognize.
This will be better understood with the help of an example:
Using the <video> Tag to Add a Video to the Web Page
The <video> tag is used to embed videos in an HTML web page. We use a <source> tag inside the <video> tag to link the source of the video.
The <video> tag has different attributes, properties and events, let us discuss all of them:
Attributes of the <video> tag
| Attribute | Description |
|---|---|
| autoplay | This attribute sets whether the video should start playing or not as soon as it loads |
| controls | This attribute sets whether the video should display controls (like play, pause, volume, fast forward, etc.) |
| crossorigin | This attribute sets the CORS (Cross-origin Resource Sharing) settings of the video |
| height | This attribute sets the height of the video player |
| loop | This attribute is used to put the video in loop mode |
| muted | This attribute sets whether the video is muted or not |
| poster | This attribute specifies an image to be shown while the video is downloading, or until the user hits the play button |
| preload | This attribute sets whether the video should be loaded or not when the page loads |
| src | This attribute sets the source of the video |
| width | This attribute sets the width of the video player |
Properties of the <video> tag
| Property | Description |
|---|---|
| audioTracks | This property is used to return the available audio tracks in a video, i.e., an AudioTrackList object |
| buffered | This property returns the user's buffered ranges of the video, i.e., a TimeRanges object |
| controller | This property returns the current media controller of the video, i.e., a MediaController object |
| currentSrc | This property is used to return the URL of the current video |
| currentTime | This property sets or returns the current playback position of the video and its value is in seconds |
| defaultMuted | This property sets or returns whether the video should be muted or not |
| defaultPlaybackRate | This property sets or returns the default playback speed of the video |
| duration | This property returns the duration of the video |
| ended | This property returns whether the video playback has ended or not |
| error | This property returns the error state of the video, i.e., a MediaError object |
| mediaGroup | This property sets or returns the group of the video |
| networkState | This property is used to return the current network state of a video |
| paused | This property returns whether the video is paused or not |
| playbackRate | This property sets or returns the playback speed of the video (like or on Youtube) |
| played | This property returns the played parts of the video, i.e., a TimeRanges object |
| readyState | This property returns the current ready state of the video |
| seekable | This property returns the seekable parts of the video, i.e., a TimeRanges object |
| seeking | This property returns whether the user is currently seeking in the video or not |
| startDate | This property returns the current time offset, i.e., a Date object |
| textTracks | This property returns the available text tracks, i.e., a TextTrackList object |
| videoTracks | This property returns the available video tracks, i.e., a VideoTrackList object |
| volume | This property sets or returns the volume of the video |
Events of the <video> tag
| Event | Description |
|---|---|
| abort | Fires when the loading of a video is aborted, but not as the result of an error |
| canplay | Fires when the browser can start playing the video (the video has buffered enough to start playing) |
| canplaythrough | Fires when the browser can play the whole video without stopping in between for buffering |
| durationchange | Fires when the duration of the video is changed |
| emptied | Fires when the media becomes empty |
| ended | Fires when the current video playlist has ended |
| error | Fires upon occurring of an error during the loading of a video |
| loadeddata | Fires when the data for the current frame is loaded, but not enough data to play the next frame of the video |
| loadedmetadata | Fires when the video's metadata has been loaded |
| loadstart | Fires when the browser starts to look for the video |
| pause | Fires when the video is paused |
| play | Fires when the video starts to play or is resumed |
| playing | Fires when the video is resumed after pausing or stopping due to buffering |
| progress | Fires when the video is being downloaded by the browser |
| ratechange | Fires when the playback speed of the video has been changed |
| seeked | Fires when the user has finished skipping to a different time position in the video |
| seeking | Fires when the user starts skipping to a different time position in the video |
| stalled | Fires when the browser is trying to get the media data that is not available |
| suspend | Fires when the browser is not getting the media data |
| timeupdate | Fires when the current playback position of the video has been changed |
| volumechange | Fires when the volume of the video has been changed |
| waiting | Fires when the video stops due to buffering of the next frame |
These properties and attributes are used inside the <video> tag and the events can be handled using Javascript.
As we have just discussed the attributes, properties, and events of a <video> tag, let us look at some examples to properly understand the usage of the <video> tag.
Example 1: Adding a video to an HTML web page
Output
See the Pen video1 by Ayush Kumar (@ayushkkumar) on CodePen.
In the above example, we have embedded a video in an HTML web page using the <video> tag. To do so, we have just assigned the location/link of the video to the src attribute of the <source> tag inside the <video> tag. The video is given controls by using the controls property in the <video> tag. The dimensions of the video have been altered using the height and width properties inside the <video> tag.
Example 2: Applying loop to the video
Output
See the Pen video2 by Ayush Kumar (@ayushkkumar) on CodePen.
In the above example, we have used the loop property in the <video> tag for the video to loop automatically.
Example 3: Adding a Poster on the video
Output
See the Pen video3 by Ayush Kumar (@ayushkkumar) on CodePen.
In the above example, we have used the poster attribute to give a thumbnail to the video, here we have used the Beluga cat's photo as the poster of the video.
Using the <iframe> Tag to Insert a Youtube Video into the Web Page
The <iframe> tag is used to specify an inline web frame within the current web page. We can also embed Youtube videos within a web page using this tag. Let us see how:
Example
Output
See the Pen iframe by Ayush Kumar (@ayushkkumar) on CodePen.
In the above example, we have embedded a RickRoll video from Youtube in an HTML web page using the <iframe> tag. To do so, we have just right-clicked on the Youtube video and selected Copy embed code, and then pasted it inside the <body> tag.
:::
How to Set Video Autoplay?
We use the autoplay property inside the <video> tag to set a video to autoplay, i.e., the video will start to play automatically.
Note: Chromium browsers like Google Chrome and Microsoft Edge do not allow autoplay without using the muted attribute.
Implementation
Code
Output
See the Pen video4 by Ayush Kumar (@ayushkkumar) on CodePen.
In the above example, we have used the autoplay property inside the <video> tag so that the video will start to play automatically upon loading.
Learn More
Apart from what we have learned in this article, there's so much more to learn about the <video> tag.
Similar to the <video> tag, the <audio> tag is used to embed audio into an HTML web page. To learn more about the <video> and <audio> tag, click here.
Conclusion
- We can embed a video into an HTML web page using the <video> tag.
- Youtube videos can be embedded into a web page by pasting the embed code (<iframe> tag) inside the body.
- We can change the dimensions of the embedded video using the height and width attributes.
- The controls property is used to show the controls of the video, the loop property to put the video into an automatic loop, and the autoplay property is used to play the video automatically upon loading.