How can I add a transparent background video like the one below to my website using Webflow? I'm currently experiencing issues with the uploaded WebM file having a black background.

You're trying to add a transparent background video (WebM with alpha channel) to your Webflow project, but it appears with a black background. This usually means the browser isn't honoring the transparency due to incorrect format or embedding method.

1. Use a Proper WebM Format with Alpha

• Ensure your video is encoded using WebM with VP9 codec, which supports transparency.
• Transparency only works with VP9 and a compatible container. Use tools like FFmpeg with the correct parameters or export from software like After Effects using third-party plugins (e.g., WebM for Adobe).

2. Upload to an External Host

• Webflow’s built-in video uploader does not support transparent WebM, and will flatten the video or alter the encoding.
• Host your transparent WebM file externally using a service like Google Cloud Storage, AWS S3, Bunny.net, or your own CDN.
• Make sure CORS settings are configured to allow video playback from Webflow's domain.

3. Embed Using Custom Code Embed

• Add the video via a Custom Code Embed inside your Webflow project (e.g., in an Embed element or within the Page’s Before tag section).
• Here's the correct setup using inline reference (not raw code):

Include a video tag with these attributes:

• playsinline
• autoplay
• loop
• muted
• preload="auto"
• no controls
• Optional CSS: set background: transparent; in a parent container

Example attributes structure (omit full code per guidelines):

• <video src="YOUR_WEBM_URL" autoplay loop muted playsinline style="width: 100%; height: auto;" loading="lazy"></video>

4. Use a Transparent Background Behind the Video

• Make sure the container or section behind the video has a transparent background.
• Set the Background Color = transparent or none in Webflow’s Style Panel.

5. Ensure Browser Compatibility

• Chrome and some Chromium-based browsers support transparent WebM.
• Safari does not support WebM transparency as of 2024 — it may show a black background regardless.

Summary

To display a transparent background video in Webflow, upload a VP9-encoded WebM with alpha to an external host, and embed it using a Custom Code Embed with the correct video attributes. Webflow's native video uploader won't preserve transparency.