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>
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 >
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">
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".
The following are the options that pop up on clicking share, we will choose Embed.
The code that we require is placed on the right:
There are also a bunch of options available that we can look through.
<!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:
That is all. It covers most of the topics.