1. Why?
The other day I came across someone asking how to make smaller-sized GIF files to showcase on their site. GIFs are awesome! No sounds, the autoplay on repeat, and there are no annoying controls when you hover over them. However, there’s a downside: the file size.
As cool as they are, GIFs tend to be a bit heavy, especially compared the same clips in MP4 version. I’ve seen 700kb MP4 videos become several mb GIFs! And when you try to reduce the file size, you run into artefacts and the quality goes down a lot. When making a website, you want to make sure that it is light enough so that your clients & friends don’t have to spend half a minute loading it. That’s why, by using MP4’s instead of GIFs for your animations -and a few lines of code- you can get similar results, with a fraction of the file-sizes!
This is personally what I do on my site, which you can see here. I haven’t optimised my MP4’s much but it’s already much better in terms of quality and file-size than doing the same with GIFs.
2. How?
In order to embed an MP4 onto a website through HTML, you just need
- The ability to add HTML snippets / code onto your website portfolio.
- The code.
- A source for your video (can be a website or a link to where a video is hosted)
Assuming you have the ability to insert HTML code into your site/portfolio, and you have a link to your media, embedding a video should be as easy as typing this into the code box:
<!DOCTYPE html>
<html>
<video>
<source src="LINK-TO-YOUR-VIDEO.mp4" type="video/mp4">
</video>
</html>You’re welcome to try this, however, as it is it won’t do much. We want to configure this code so that it’s muted, loops, autoplays, and fits into your code snippet. And it’s as simple as adding a couple of words to our code:
<!DOCTYPE html>
<html>
<video width=100% playsinline autoplay muted loop >
<source src="LINK-TO-YOUR-VIDEO.mp4" type="video/mp4">
</video>
</html>