Video Transparency in Framer: A Custom Solution

Transparent videos require specific formats and fall back method to account for all browser supports

Transparent videos require specific formats like WebM with VP8 codec or MP4 with HEVC (H.265) codec, which aren't universally supported across all platforms and browsers.

To work around this, we need to create a custom code component that supports multiple video formats. This approach ensures broader compatibility and allows for transparent video playback in Framer projects/websites.

The following code demonstrates a custom video component that supports both MP4 (HEVC) and WebM formats:

import { addPropertyControls, ControlType } from "framer"

export function MyVideo(props) {
    return (
        <video
            autoplay="autoplay"
            style={{ objectFit: "contain", ...props.style }}
            loop
            muted
        >
            <source src={[props.movFile]} type={["video/mp4;codecs=hvc1"]} />
            <source src={[props.webmFile]} type={["video/webm"]} />
        </video>
    )
}

MyVideo.defaultProps = {
    movFile: "",
    webmFile: "",
}

addPropertyControls(MyVideo, {
    movFile: {
        type: ControlType.File,
        title: "MP4",
        allowedFileTypes: ["mp4"],
        defaultValue: "",
    },
    webmFile: {
        type: ControlType.File,
        title: "WEBM",
        allowedFileTypes: ["webm"],
        defaultValue: "",
    },
})

This will create a custom component offering 2 video uploads. Both videos will appear in your HTML. Browsers will automatically fallback to the format they support best.

---