Ironically, this is meant to show MP4(left) vs GIF(right) advantages in a visual way, but it’s all a GIF...

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)

💡

If you are already getting a server/host for your website, you should be able to upload any videos onto the server and obtain a link. Personally -and since I use Squarespace- I opened an account on Amazon S3 where I host all my media.

⚠️

Theoretically, you could even use Dropbox links as a way to host the video. However, I haven’t tested that thoroughly and if the link ever changes, the code won’t be able to fetch the video anymore. If you want to try/test out using Dropbox, just replace the “dl=0” at the end of the link with “raw=1”.

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>

Replace LINK-TO-YOUR-VIDEO.mp4 with the actual link to your MP4!

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>

✅

And that’s it! If your link is working correctly, you should be able to see your MP4 autoplaying and looping. As a general bonus you can use that “width=100%” parameter to resize the MP4 without having to re-export at a different resolution.

Happy Websitt-ing? Feel free to contact me with any questions or suggestions on Instagram or Twitter.

Using HTML code to Embed MP4 files into your Website instead of GIFs

1. Why?

2. How?