Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
video
iframe
youtube

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>
  <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.

RELATED TAGS

html
video
iframe
youtube

CONTRIBUTOR

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

View all Courses

Keep Exploring