Manjit Baishya
My Coding Roadmap

My Coding Roadmap

Day 07: Videos in HTML

Day 07: Videos in HTML

Manjit Baishya's photo
Manjit Baishya
·Sep 18, 2022·

2 min read

Just like images, we can also add videos to our HTML webpages. It is somewhat similar to adding images into webpages. The video needs to be placed in the same root directory as the HTML page. We will be using the "video" tag to add the videos. The codes to add a video are given below:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Blogger</title>
  </head>
  <body>

    <video src="Crab Video.mp4" height="300">

</video>
    </a>
  </body>
</html>

Output>>>

image.png

But if you try to play the video, it does not get played, i.e., there are no controls provided to the video yet!

By adding the "controls" into our code, we can display the various controls for the video file.

<video src="video.mp4" controls >

Output>>>

image.png

At places, we would like the video to be of a specific size. But it is important to remember that we must preserve the aspect ratio of the video. So, we define either the height or the width of the video.

<video src="Crab Video.mp4" controls height="300">

In order to attach a thumbnail, we can just proceed as follows:

<video src="Crab Video.mp4" controls poster="thumb.jpg" height="300">

image.png

There are a lot of instances where you would also like to place a YouTube video directly into your website. That process is called embedding a video. In order to embed a video, we use the "iframe" tag.

At first, we will copy the embedded code provided by YouTube for that particular video from their website. Simple we will just click on the "Share" button and select "Embed".

image.png The following are the options that pop up on clicking share, we will choose Embed.

image.png The code that we require is placed on the right:

image.png There are also a bunch of options available that we can look through.

image.png

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Blogger</title>
  </head>
  <body>

  <iframe width="560" height="315" src="https://www.youtube.com/embed/cE0wfjsybIQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</video>
    </a>
  </body>
</html>

When we update with all these codes, we will have the following as a result:

image.png

That is all. It covers most of the topics.

Thank You.

 
Share this