Embedding Video In Html

Hello everyone!! Welcome to flower brackets blog. In this post we will be checking out embedding video in html.

In the previous post we understood how we can include audio clips and the way in which you include video clips is very similar to how you include audio clips.

The video element that we are going to use in this post is in fact going to appear very similar to audio element that we used.

And the entire setup in fact except that the video element is going to take few extra attributes.

Example : embedding video in html

The html file that I have here is as below,

<!DOCTYPE html>
<title>Embedding Video In Html</title>
<h2>Indian Premier League - Highlights</h2>
<video width = "300" height = "300" controls>
<source src = "IPL Highlights.mp4" type = "video/mp4" /> <p>Warning!! Browser does not support this file</p>

Inside the body section I have the opening and closing <h2> tags and the text included between the opening and closing <h2> tags is “Indian Premier League – Highlights”.

This is actually the title of the video clip that I have included in the web page. Then I have the video element.

So you have to type in video first give a space and then you can set the width as well as the height of the video clip as you wanted to appear on your web page.

Let’s say I wanted to have a width of 300 pixels and a height of 300 pixels. I will have to type in width the name of the attribute the equal to symbol and then within double quotes the value for it.

The value has to be in pixels. So 300 pixels is the value that I want the width attribute to have, 300 for height and then you give a space and type in controls.

Also Read – Embedding Audio In Html

And the significance of the controls attribute is that it allows you to play, pause and seek forward backward, adjust volume and it allows you to do all that.

Then you know within the video element I have another tag, the source tag for the video element.

This is going to tell the browser where the file is, what is its type and what is its name.

The video file that I have used here or I have called it “IPL Highlights.mp4” and I have it in the same folder as my html file.

Right, and then you also have to specify the type of your file. So this is a mp4 file. That’s why I have written video forward slash ( / ) mp4 as a value for the type attribute.

Then I have closed the source tag using the forward slash and the closing angular bracket.

I also have a paragraph of text and the text that’s enclosed within <p> tag is “Warning!! Browser does not support this file”.

This text will only be displayed if your browser fails to load above video clip for some reason.

This is how the file looks when I open it in google chrome,

Embedding Video In Html

You can see that you have the video clip and you can play it and you can also seek forward in it.

Also you can adjust the volume if you want to and you can also maximise it you can view it in full screen mode and you can get back.

These are all the controls that html offers.


That’s it for now. I hope you guys have understood embedding video in html. You may subscribe to my blog flower brackets and if you liked this post share it across social networks.

Related Posts