How to host videos with transparency (for free)
This post is a part of our series called The Big Guide to Transparent Backgrounds in videos and images
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
index.htmland 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
- Go to Netlify Drop and drag the folder. It looks like this:
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
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.
Off to Transparenlandia!
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!