How to Embed MP4 Video in HTML5 With Controls

Today you’ll learn how to quickly embed MP4 videos in HTML using the <video> element. I’ll cover the following :

1. How to adjust the size of your video player
2. How to autoplay your videos
3. How to infinitely loop your videos

Most tutorials use GIFs for small videos to illustrate concepts. I’ve found that MP4’s have better quality, and take up less space. MP4, unlike WebM, works in all modern browsers, and you can also upload them on video services like YouTube.

Embed video with the HTML5 video element

To display MP4 video in your HTML you need to use the HTML5 <video> element. The most simple implementation looks like this:

<video width="500" controls>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

You can remove the controls attribute, but I don’t recommend it, since it’s what allows your users to pause/play/rewind your videos.

The 500 value is measured in pixel units (500px).

Just replace "path-to-your-video.mp4" with a real MP4 source, you can use this for testing (from one of my tutorials)

https://res.cloudinary.com/techstacker/video/upload/f_auto/v1548698438/TechStacker/mac-drag-app-icon-to-dock.mp4

Adjust your video player’s size (width/height)

Your video currently has a width of 500 pixels, you can change that to any value you want. If you want it to take up 100% of the relative space (the container your video element sits inside) you can simply change it to width="100%".

You can also adjust the height by using the height. Here’s an example of both in use:

<video width="100%" height="400" controls>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

Autoplay your video (once)

To autoplay your MP4 video once the first time your users see your video on their screen, add the autoplay property on the video element:

<video width="500" controls autoplay>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

How autoplay works

The autoplay function will automatically trigger as soon as your users have the video inside their screen’s viewport.

Loop your video

To loop (infinitely play) your MP4 video in HTML5, use the loop attribute:

<video width="500" controls autoplay loop>
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

Note: the controls attribute allows your use to pause/stop the video, but keep in mind that looping videos can be annoying, especially with sound. Only use the loop attribute when it makes sense in specific use cases.

Browser support

The days of old dinosaur browsers are almost over. But for browsers that don’t support the video element, you can add some text between the <video> tags to let your users know:

<video width="500" controls autoplay>
  <source src="path-to-your-video.mp4" type="video/mp4" />
  Your browser is outdated, update it to display the video
</video>

The text will only be shown in old outdated browsers (below Internet Explorer 9).

Using WebM with MP4 fallback

If you have both a WebM and an MP4 version of your video, you can use the following code to use MP4 as a fallback, if your users browser doesn’t support WebM:

<video width="500" controls>
  <source src="path-to-your-video.webm" type="video/webm" />
  <source src="path-to-your-video.mp4" type="video/mp4" />
</video>

Note: as of right now, only Chrome and Opera fully support WebM, but FireFox and Edge are working on implementing it as well.

Bonus tip

To quickly record MP4 videos you can use these free tools:

• The Kap app (Mac)
• Icecream Screen Record (Windows)

To upload and store your videos for free I recommend Cloudinary.