How to Embed a MP4 Video File in HTML like Professionals
August 27, 2021 15:00Posted by Selena Thomas to MP4
Today, everything becomes increasingly easy except the professional work, such as insert a MP4 video in HTML web page. That is because all web browsers did not have a uniform standard for defining embedded media files like video. In this chapter we’ll demonstrate two methods about adding videos on web pages, so that everyone can make video embedded HTML like professionals.
Web pages use HTML codes to create structure. It is similar to add a MP4 in HTML with embedding a photo. However, it needs more controls, such as play, loop, audio, etc. Moreover, the video should zoom in and out according to your browser. Therefore, it requires an external CSS document too.
Firstly, create a CSS document, and enter the command below:
.welcome_vid {
display: block;
margin-left: auto;
margin-right: auto;
width: 80%;
height: auto;
}
It means adding the MP4 in the center of the HTML and making the video responsive. Name the CSS document as style.css and put it in the same directory with the web page.
Insert the CSS document to the web page by adding the codes to the web page:
<head>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
</head>
Now, insert the MP4 in HTML with the codes below:
<video class=”welcome_vid” controls autoplay loop muted>
<source src=”path/name.mp4″ type=”video/mp4″>
This browser does not display the video tag.
</video>
Replace path with your video folder path or URL and name with your MP4 file name.
Save the web page and check if the video plays on the web page.
The command language is tough for beginners and average people. You may wonder whether you can add MP4 in HTML without any technical skill. The steps below might be helpful.
Open YouTube website in a browser, and sign in your account. If you do not have, create a new account.
Click the Create button with the camcorder icon at the upper right side and select Upload video. Then click SELECT FILES button on the popup dialog and upload the MP4 that you want to insert in HTML.
Follow the on-screen instructions to set the description and other options. At last, hit the SAVE button.
Next, open the uploaded video in YouTube, and you will see several options. Click the Share icon and you will get the share panel. Go to the Embed tab, copy the link in the box and paste it into your web page. The MP4 will add to your HTML document. By default, video embedded inside an iframe. You can also change code, like video size and more.
Note: YouTube only supports to up a video up to 12 hours less than 128GB. The recommended aspect ratio is 16:9.
MP4 is a standard video format for distributing animated content through the internet. Sometimes, you just have AVI, MKV or other lossless video files. They offer better quality than MP4, but file size is larger. The best solution is to convert your video files to MP4 with Blu-ray Master Video Converter Ultimate.
Main Features of the Best MP4 Converter
Briefly speaking, it is the best option to convert your video files to MP4.
How do you turn a video into a link?
To convert a video into a URL link, you need a host service. Fortunately, there are many services available. YouTube, for example, enables you to upload a video and turn into a link. Moreover, cloud services like Dropbox have such capacity too.
Which tag is used to insert video in HTML?
The <video> element, which adds native video playback support to the HTML specification in HTML5, can be used to embed a video in an HTML document.
How can I play a video on page load?
Before HTML5, in order to have a video play on a webpage, you would need Adobe Flash Player plugin. With the introduction of HTML5, you can now place videos directly into the page itself.
This guide has told you two easy ways to insert MP4 to HTML, so that you can publish videos on your web page. For beginners, you can use YouTube as the host and create a video link. However, the HTML codes give you more controls of video playback. If you have other problems, please feel free to leave a message below this post.
More Reading
How to Convert DAV to MP4 – 3 Workable Methods to Convert CCTV DAV Files
What is a DAV File? When you have recorded some videos in DAV, how to convert DAV to MP4? Just learn more about the 3 workable ways from the article.
2 Best Ways to Convert M4A to MP4 on Windows and Mac
When you want to convert iTunes M4A to an Android phone or other devices, you can get 2 efficient and easy ways to convert M4A to MP4 from the article.
How to Convert WLMP File to MP4
Did you fail to open a WLMP file on your computer? The fact is no media player can play it. You need to convert the WLMP to MP4. This article will give you 3 ways to convert WLMP to MP4.
How to Convert WLMP File to MP4
Did you fail to open a WLMP file on your computer? The fact is no media player can play it. You need to convert the WLMP to MP4. This article will give you 3 ways to convert WLMP to MP4.
