Transparent video not transparent on site builders like Squarespace

If your transparent video looks right on your Mac, but the background annoyingly turns black, white, or solid after you upload it to Squarespace, you might be bumping into Squarespace's video processor.

Site builders often process uploaded videos so they stream reliably on the web. Squarespace says directly uploaded videos are converted to MP4 versions for browser compatibility. This is great! But while that kind of conversion is great for ordinary videos, it can remove the alpha channel that makes your background transparent.

First, check the original video

Let's quickly make sure that the source material is in a good shape.

Open Rotato's free Transparent Video Tester, then drag in your video.

You will see one of these:

A: The tester's gradient background shows through the empty areas on your video B: The video's background is black (or another color)

If it's A, you're good. If it's B, make sure you export the video with a transparent background.

Avoid uploading the transparent video directly to Squarespace

Squarespace confirms that directly uploaded videos are automatically converted into MP4 files for playback. That does not prove every transparent upload will fail, but it does mean Squarespace is no longer serving your original file. Since transparency only survives when the conversion explicitly preserves an alpha-aware format, the converted Squarespace video can lose the alpha channel and play as a normal opaque MP4.

If Squarespace gives you a way to disable video processing or use the original uploaded file, use that. If not, host the video files somewhere that gives you direct file URLs, then embed those URLs in Squarespace with a code block.

We have a separate guide to hosting transparent videos on the web. The short version is: put the video files somewhere that preserves and serves the original files directly, such as Cloudinary, Cloudflare R2, Netlify, or your own CDN, then use those direct file URLs in your embed code.

Avoid YouTube, Vimeo, and other video platforms for this specific use. They also re-encode videos and usually do not preserve transparency.

Use two video files, not one

Transparent video on the web needs different formats for different browsers:

• Safari needs HEVC with alpha
• Chrome, Edge, and Firefox generally use WebM with alpha

That means you should publish both files and let the browser choose.

<video autoplay loop muted playsinline>
  <source src="https://example.com/video-hevc.mov" type='video/mp4; codecs="hvc1"'>
  <source src="https://example.com/video-webm.webm" type="video/webm">
</video>

Read the full guide here: How to use transparent videos on the web.

Check the embed after publishing

Transparent videos may not preview correctly inside the Squarespace editor. Always check the published page in both Safari and Chrome.

If one browser works and the other does not, the missing or broken file is usually the format for that browser:

• Works in Safari but not Chrome: check the WebM file
• Works in Chrome but not Safari: check the HEVC file

Other things to check

• Make sure the video tag is using muted and playsinline if you want autoplay.
• Make sure the video is on top of something visible. A transparent video on a black section can look like it has a black background.
• Make sure your file URLs point directly to the video files, not to a preview page.
• Make sure the server sends the right file types. WebM should be served as video/webm, and the HEVC file should be served as video.
• Keep the video small enough for the web. Large transparent videos can be slow to start, which makes testing confusing.

If you want the simplest debug path, test the original file first, then test the hosted file URL, then test the final Squarespace page in Safari and Chrome.