Today you’ll learn how to quickly embed MP4 videos in HTML using the
<video> element. I’ll cover the following :
- How to adjust the size of your video player
- How to autoplay your videos
- 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.
500 value is measured in pixel units (500px).
"path-to-your-video.mp4" with a real MP4 source, you can use this for testing (from one of my tutorials)
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
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
<video width="500" controls autoplay loop> <source src="path-to-your-video.mp4" type="video/mp4"> </video>
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.
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.
To quickly record MP4 videos you can use these free tools:
To upload and store your videos for free I recommend Cloudinary.