How to Embed Any Video in HTML

In HTML, the <video> tag is used to embed a video. To successfully display and play a video on a web page, we have to use various other tags and attributes along with the <video> tag.

In an example below, let’s write a code and insert a video on our webpage.

Example

<body>
  <video width="320" height=260" controls>
  <source src = "https://rb.gy/96xvu" type= "video/mp4">
  Your browser doesn't support this of video. 
  </video>
</body>

Code Explanation

In an above code the <video> element is used to insert a video on a web page. Inside the video element the height and width attributes are usec to set the height and width of the video. The controls property is used to control the video on a web page (stop or pause the video).

After that we have used the <source> tag followed by the src attribute then between the double we have paste the URL of the video that we want to insert on a web page. The text after the <source> tag is displayed only when the video file failed to load on a web page.

It is also a good practice to use video files with different file formats, like this:

<body>
  <video width="320" height=260" controls>
  <source src = "video.mp4" type= "video/mp4">
  <source src = "video.ogg" type= "video/ogg">
  <source src = "video.webm" type= "video/webm">
  Your browser doesn't support this of video. 
  </video>
</body>

In case if any web browser doesn’t support the mp4 file it will sure support any one among other two file formats.

Embed YouTube Video in HTML

To embed YouTube video in HTML, we have to use an <iframe> tag. Here is how we can embed a YouTube video.

<body>
  <h1>Embed YouTube Video.</h1>
  <iframe width="560" height="320" src="https://youtube.com/embed/VIDEO ID>
  </iframe>
</body>

How to Get Video ID

To get a video ID of a YouTube video we need to open that video, right click on it go to “stats for nerds“.

and copy the video ID.

Now paste this video ID in your code like this:

<body>
  <h1>Embed YouTube Video.</h1>
  <iframe width="560" height="320" src="https://youtube.com/embed/4FVYdV09-RY / RXPZ JT2E ZXVF">
  </iframe>
</body>

Copy the Code and Run it Here

Previous

Next

Share This Post!

How to Embed Any Video in HTML