How to Embed Video to HTML Document

Follow this tutorial you will learn how to Embed Video files using HTML in web pages.

In this tutorial we are going to show you that how to embed video in HTML document. Videos are the best way for understanding anything. Keeping this in mind, working with HTML embedding videos is growing vigorously and there are special videos search engines available on internet. On the other hand people also embed videos in HTML documents as their resume and sharing links to the employers.

Step 1 -- Video tag with width and height

Over here, HTML is embedding videos from the desktop which we use as a sample. To get started, first let's right click on the file and click on properties. Here there are three things to remember. One is the name of the video file, the extension of the video file and the height and width of the video.

Now let's create an HTML document first. For that, open up notepad, and let's start by first typing in the video tag.

In this tag, we will set the dimensions of the video, and make sure that they are the same as the original video.

Step 2 -- Location of video in the source tag

Now it's time to set the source of the video file. For that, we will create a source tag here. Type "src", followed by an equals to sign. The source link should be in inverted commas here. Now we can type the location of the file within the inverted commas.

It is important to note that if your html file and video file is in the same location, you only need to write the name of file with its extension.

With that done, we will set the type to video forward slash mp4. This is because our video is in the mp4 format.

Step 3 -- Selecting HTML video document location

Now let's save this document as an html file.

Step 4 -- Video HTML file

Now let's save this document as an html file. With that done, let's open up the html document in the browser.

Step 5 -- Video without navigations

Over here, you will notice that there is no video navigation, for example the play or stop button.

Step 6 -- Added control attribute in video tag

So let's go back to our html document and in video tag, let's type "controls" after defining the dimensions.

Step 7 -- Video with navigations

Let's refresh the page now and you can see video is playing as you click on the play button.

Step 8 -- Set width for video player

You can always resize the dimensions of the video player according to your requirements by changing the width and height in the code.

And that's it.

[howtechweb]

❗ Subscribe To Our Main YouTube Channel

[danielwylie-eggert]

Here it is to just copy and paste:

<video width="1280" height="720" controls >
<source src="video.mp4" type="video/mp4">

</video >

[ubaidbinrauf]

Exactly what tag I want. This video is best video that you get what you need "to the point" instead of watching half an hour or full hour video to get one point. Nice work I appreciate.😘

[alekssbelskis]

it works perfectly fine when you do it properly:


<video width="1280" height="720" controls >
<source src="video.mp4" type"video/mp4">

</video>

[bartdezwart]

Quick and clean tutorial, awesome video!

[Glitterboom]

SIMPLY STATED AND THE CONFUSING INFO AMAZINGLY DELIVERED ...EASY-PEASY!! THANK YOU MUCH!!

[dontdeletemeofficial]

That's a handy bit of info. Thank you for sharing that!

[middlechild]

Thanks so much. . I needed this tutorial specifically. Not those other ones with the embedded source from YouTube.

[sharma_arpit]

This video is very helpful.
Thanks for creating.

[vandanachaudhary]

Thank u so much I am searching for this video only... It's really help me sirr thank u

[DoctorRocker]

Here is a tip for those with Hotmail accounts. 1) Goto your Hotmail account and click on the blue box in the upper left hand corner with 9 squares.  2) Click on "Onedrive" to open the folder and upload your video to it.  3) Right click on your uploaded video file and select "embed" from the dropdown menu -- This will create the code you need to put in your HTML file.  4) Open your HTML file and select 'View Source", then copy and paste the code and save the file.  5) Refresh your HTML file and play your video.  :)

[pawankayat]

The video is not supported of all browser.

[trivalenttriv]

You are a star. Thank you so much for your well explained video

[GabrielKGardner]

I know a lot of people are saying this doesn’t work, it DOES. Just go back and check to make sher EVERYTHING is spelled correctly and in the right position.

[parveenahuja]

Thanks for this tutorial
I like those videos which come to the point directly without wasting much time requesting to subscribe blab blab blab..
Thanks for such tutorials once again.

[nari]

it worked for me, thanks you saved my project!

[aikiperez]

Very useful tip. Successfully tested. Very much appreciated.

[aliyt]

its absolutely working man thaks lot for this

[ackildelacruz]

Its working lol thx now i finished my website and im gonna pass it to my teacher

[footballclicks]

Thanks broI know how to insert videos but the controls are not showing but from this video I learnt to add controls. Thanks.