Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags


How to add video in HTML

Shahpar Khan
svg viewer

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:

  1. <video></video>
  2. <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>
      <video width="160" height="120" controls>
        <source src="my_video.mp4">
        Can't load the video.

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:

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 = "" + "videoID"

In our case, the formula will translate into the following src:

src = ""

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.




Shahpar Khan
Copyright ©2022 Educative, Inc. All rights reserved

View all Courses

Keep Exploring