How To Insert A Video In HTML From Computer
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Amruta
In this tutorial we will show you the solution of how to insert a video in HTML from computer, there are several ways of inserting a video from computer in a website.
HTML tags like embed, iframe and video are used for inserting videos in HTML.
We also created a previous tutorial in which we show you how to embed a you tube video in your html page. For you tube videos, you can visit to that page.
Step By Step Guide On How To Insert A Video In HTML From Computer :-
Method 1 - With the help of iframe tag
The first way would be using the iframe tag. As, iframe tag is a paired tag so it must have a closing tag. Here, is an example of using iframe tag with the help of html codes to understand how it work, i.e.
<!DOCTYPE html> <html> <head> <title> Title of the document</title> </head> <body> <iframe src="location_of_video_where_it_is" frameborder="0" width="400px" height="500px"> </iframe> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Now, we use iframe tag which we use to insert video from computer. Here, we create an iframe tag in which we have to give location of video from our computer. Whereas width and height is given for dimensions of video.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Method 2 - with the help of video tag
The video tag is also helpful for inserting a video in webpage from computer. Video tag is similar to iframe but in we have to use data attribute instead of src, which we use in iframe.
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body> <video width=”320” height=”320” controls autoplay> <source src=”video_link_location” type=””> <source src=”video_link_location” type=””> </video> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Now, we use video tag which we use to insert video from computer. After giving video dimensions in video tag. We have to give location of video in source tag. You can use different source tags for different type of videos.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Method 3 - By using embed tag
We can also use embed tag to insert a video from computer in webpage. Embed tag is also similar to iframe, but we use embed instead of iframe.
<!DOCTYPE html> <html> <head> <title> Title of the document<title> </head> <body> <embed data="video*link*" width="500px" height="500px"></embed> </body> </html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Now, we use embed tag which we use to insert video in html from computer. In this we have to give the location of video from our computer and then dimensions to video with the help of height and width.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last here in conclusion, we can say that with the help of this article we are able to insert a video in html from computer. I hope this tutorial on how to insert a video in HTML from computer helps you.
About Amruta
