How to add video in HTML
Ways to add video using HTML
While designing a web-page, you may want to add videos to your HTML document. There are two tags that let you do this:
<video></video><iframe></iframe>
The video formats that HTML supports are:
- MP4
- WebM
- OGG
OGG format is not supported on Safari.
<video> tag
The <video> tag lets you add videos that are present in your code directory. Let’s look at an example:
<!DOCTYPE html>
<html>
<body>
<video width="160" height="120" controls>
<source src="my_video.mp4">
Can't load the video.
</video>
</body>
</html>
The first thing you’ll notice is the three attributes of the <video> tag: width, height, and controls. Specifying the dimensions using width and height attributes avoids the possibility of the video flickering or changing sizes. Appending the controls attribute adds video controls such as play/pause buttons.
Next, you need to specify the video you want to play by providing its location/path. You can do this by adding a <source> tag inside the <video> tag, as shown in the sample code above; or, you can add a src attribute in the <video> tag, as shown below:
<video width="160" height="120"
src="my_video.mp4" controls>
If the video fails to load for some reason, the text inside the <video> tag is shown.
To explore different attributes that a
<video>tag supports, click here.
<iframe> tag
The <iframe> tag allows you to embed online videos from YouTube. Every YouTube video has an ID. You can find that ID by observing the URL. For example, let’s look at a random youtube video URL:
https://www.youtube.com/watch?v=K2sc_ck5BZU
The sequence of characters after v= is the video ID; in this case, it is K2sc_ck5BZU. These IDs are unique and can be used to embed videos in an HTML document. Use the formula below to build the src to embed a video:
src = "https://www.youtube.com/embed/" + "videoID"
In our case, the formula will translate into the following src:
src = "https://www.youtube.com/embed/K2sc_ck5BZU"
However, as with the <video> tag, do not forget to specify the dimensions to keep the video from flickering.
Here is code to embed a TedEd video from YouTube on Schizophrenia:
To read more about the
<iframe>tag, click here.
Free Resources