How to Embed a MP4 Video File in HTML like Professionals

How to Embed a MP4 Video File in HTML like Professionals

Selena Thomas

August 27, 2021 15:00Posted by 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.

Embed MP4 in HTML

Part 1: How to Insert MP4 in HTML

Method 1: How to Embed MP4 in HTML with Code

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.

MP4 HTML

Step 1

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.

Step 2

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>

Step 3

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.

Step 4

Save the web page and check if the video plays on the web page.

Method 2: How to Add YouTube MP4 in HTML

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.

Step 1

Open YouTube website in a browser, and sign in your account. If you do not have, create a new account.

Step 2

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.

Upload Video

Step 3

Follow the on-screen instructions to set the description and other options. At last, hit the SAVE button.

Step 4

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.

Share Panel

Note: YouTube only supports to up a video up to 12 hours less than 128GB. The recommended aspect ratio is 16:9.

Recommend: Best MP4 Converter

Add File

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.

Part 2: FAQs about Embedding MP4 in HTML

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.

Conclusion

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.

What do you think of this post?

Excellent

Rating: 4.9 / 5 (180 Votes)

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.

MP4

What is MP4 Extract Subtitles from MP4 MP4 Metadata Editor MOV vs MP4 Compress MP4 File MP4 Cutter Crop MP4