How to host videos with transparency (for free)

The logical thing to do in 2022 when you want to get a video online is to upload it to Youtube or Vimeo. But if you try to do that with a transparent video, you'll realize it does not work. Video sharing sites re-encode your videos and remove the transparency in the process. And you often don't get access to the raw video file URL. So what do you do?

You host it yourself. But if you're using a site builder like WIX or Squarespace, you often can't just upload your videos directly.

So now you need a hosting provider. Luckily, there are a lot of good ones out there. Today we'll look at two great providers, each with a different spin.

Option 1: Cloudinary

Free forever and sporting a famous high-performance delivery network. Cloudinary is your media folder on the web. You get 25 credits for free and can upload videos up to 100MB. Check out all the details here, including the paid plans.

How to do it

Create a free account, then go to your Media Library and drag in your videos. You may want to create a folder to keep things organized. Here's what it looks like

Grab your video URLs

You'll see a link icon when you hover over the video thumbnail. Click it, and you copy the URL for your video.

You can now paste that URL into a browser and confirm it works.

Finally, use that URL in your HTML

<video width="600" height="100%" autoplay loop muted playsinline>
<source src="PASTE YOUR MOV CLOUDINARY URL HERE" type='video/mp4; codecs="hvc1"'>            
<source src="PASTE YOUR WEBM CLOUDINARY URL HERE" type="video/webm">        
</video>

Pretty straightforward, right?

Option 2: Netlify

One of our favorite companies out there, the people at Netlify go out of their way to make everything faster and easier than you thought possible. In addition, their pricing is generous: 100 Gb bandwidth for your files per month.

The way you get your files into Netlify is slightly different compared to Cloudinary. Let's take a look.

How to do it

First, prepare. Netlify Drop expects a mini website, so if you're also looking for a place to host your HTML, this is the obvious choice. To make this step easier for you, we created a template.

• Download the template site for transparent videos if you don't already have one.
• Replace the video files with your videos
• Edit index.html and change the video URLs there, too. You don't have to specify the entire URL (you don't know them yet, and they're not needed), but just the filenames, like my-video-hevc.mov
• Go to Netlify Drop and drag the folder. It looks like this:

Netlify drop lets you drag and drop a folder with a website and immediately publish it on the web.

After a few seconds, your site is live!

You can also reference your videos directly by adding your video's filename after the URL you got from Netlify

https://something-something.netlify.app/your-video-file-name.webm

Next, sign up for a free Netlify account within an hour to ensure they don't delete your stuff. Once logged in, you can update your files under the Deploy tab.

Option 3: Cloudflare R2 (our favorite)

Recently launched, Cloudflare R2 changes the game for online hosting. The big idea is: don't pay for bandwidth. For years, developers have enjoyed Cloudflare's Cache product, but it was slightly technical to set up and required your own domain. Not so with R2. It's basically a hard drive in the cloud. You drag and drop your files, and just like that, your videos are online and ready to be embedded on your website, no matter where and how you host it.

What we like

• Generous 10Gb free space and extra space is cheap
• No bandwidth limits and no bandwidth charges
• Drag and drop "Finder"-like interface

Cloudflare R2 pricing as of August 2023

Off to Transparentlandia!

We've seen two different ways of hosting your videos for free in this short guide. Let us know if you stumble upon even better ways or have any comments on this guide!