Skip to main content

Upload and Use Transparent Videos

Upload and use transparent videos in Bannersnack. Learn how to link WebM and MOV formats for cross-browser compatibility and use motion graphics, overlays, and animated elements with preserved transparency in your designs.

Updated this week

Bannersnack allows you to upload and use videos with transparent backgrounds inside your designs.

Transparent videos are commonly used for animated overlays, motion graphics, logos, and visual elements that need to appear without a background.

Because browsers support transparency differently, transparent videos require a specific upload and linking workflow.

How transparent video works

Transparent video uses an alpha channel, similar to transparency in PNG images but applied to video.

Different browsers require different formats:

  • WebM (VP9 with alpha): Supported in Chrome, Firefox, and Edge

  • MOV (HEVC with alpha or ProRes 4444): Supported in Safari

For full browser compatibility:

  • Both formats can be uploaded and linked together.

  • Devices automatically select the correct format during playback.

  • No manual setup is required after linking.

A single format can still be used, but browser limitations may apply.

Important limitation

Transparent videos are supported for:

  • Editing

  • Preview

  • Generator (multi size editing environment) usage

  • HTML5 export and ad delivery

Transparent video files themselves cannot be downloaded.

Flattened exports render transparency exactly as seen on canvas:

  • JPG

  • PNG

  • PDF

  • MP4

  • GIF

Where you can upload videos

Videos can be uploaded from:

  • Brand Library -> My Uploads

  • Editor → Elements → My Uploads

  • Generator → Elements → My Uploads

Uploading and linking works identically in all locations.

Uploading a transparent video

When uploading a MOV or WebM file, Bannersnack always displays a compatibility prompt.

Transparency cannot be detected automatically, so you must choose how the video should be handled.

Important behavior:

  • The video is not placed on the canvas until an option is selected.

  • This prevents visual artifacts caused by incompatible formats.
    ​
    You can proceed in three ways.

Option 1: Upload the companion format (recommended)

If your video contains transparency:

  1. Upload a WebM or MOV file.

  2. When prompted, upload the missing companion format.

  3. Bannersnack automatically links both files.

Image depicting the modal triggered after uploading a format that supports transparency, such as MOV or WebM.

After linking:

  • The video behaves as a single asset.

  • Transparency works across modern browsers.

  • The correct format loads automatically per device.

Linked transparent videos display:

  • A checkered thumbnail background

  • A WEBM & MOV format badge

Image showing the icon identifying linked MOV and WebM files.

Fastest method: Upload both files together

You can skip the compatibility prompt entirely.

Upload both formats at once:

  1. Select both WebM and MOV files in the upload dialog
    or

  2. Drag both files into the upload area simultaneously.

Bannersnack automatically:

  • Detects matching formats

  • Links the files

  • Prepares cross-browser transparency​

Option 2: Use without transparency

If your video does not contain transparency:

  1. Upload the file.

  2. Select Use without transparency in the prompt.

Image depicting the modal triggered after uploading a format that supports transparency, such as MOV or WebM.

Bannersnack automatically:

  • Converts the file to MP4

  • Removes the original MOV or WebM file

  • Prepares the video for standard usage

This action is permanent. Transparency cannot be restored after conversion.

Use this option when the video format is MOV or WebM but no alpha channel exists.

Option 3: Decide later

You may postpone linking.

  1. Click I’ll do this later.

Image depicting the modal triggered after uploading a format that supports transparency, such as MOV or WebM.

Result:

  • WebM remains transparent in Chrome, Firefox, and Edge.

  • MOV remains transparent in Safari.

  • The file stays available for later linking.

If only WebM exists:

  • The flattened exports (JPG, PNG, PDF, MP4, GIF) will work as expected.

  • Safari displays a non-transparent MP4 fallback.

Formats can be linked later at any time.

Linking transparent videos later

To link formats after upload:

  1. Open My Uploads or Brand Library.

  2. Locate the video.

  3. Open the options menu (⋯) in the top-right corner.

  4. Select Link transparent video.

  5. Upload or select the companion format.

Image showing the options (more) menu for uploaded assets, with the option to Link transparent video highlighted in red.

After linking:

  • Both formats behave as one asset.

  • Existing designs update automatically.

  • No redesign is required.

Unlinking videos

To unlink formats:

  1. Open video options (⋯).

  2. Select Unlink transparent video.

Both files remain in the library but are no longer paired.

Identifying transparent videos

Transparent videos can be recognized by:

  • Checkered background behind the thumbnail

  • Format badge:

    • WEBM

    • MOV

    • WEBM & MOV

Additional actions:

  • Hover over a video to preview playback.

  • Click the info icon (i) to view:

    • File name

    • Duration

    • File size

Image showing the tooltip with file name, pixel dimensions and file size for uploaded assets.

Filtering your library

You can filter videos by format:

  • WEBM & MOV — linked transparent videos

  • WEBM — standalone WebM files

  • MOV — standalone MOV files

Filters are available in:

  • My Uploads

  • Brand Library

Using transparent videos in designs

Once placed on the canvas, transparent videos behave like standard videos.

Supported actions include:

  • Resize

  • Reposition

  • Trim

  • Crop

  • Animate

  • Preview playback

Transparency is preserved automatically. No additional configuration is required.

HTML5 export and ad delivery

When exporting HTML5 designs:

  • Both WebM and MOV files are included for linked videos.

  • Multi-source video delivery is generated automatically.

  • Each browser loads the compatible format.

Transparency remains preserved across supported environments.

Generator support

Transparent videos are fully supported in the Generator.

You can:

  • Apply transparent videos across bannerset sizes

  • Replace existing video elements

  • Maintain transparency across all generated outputs

All sizes automatically use the correct format.

Best practices

  • Export both WebM and MOV versions from your video editor.

  • Upload both files together for fastest setup.

  • Use Use without transparency for standard videos.

  • Link formats when HTML5 transparency is required on Safari.

  • Use library filters to manage assets efficiently.

  • Match file name and resolution when linking formats.

Browser compatibility summary

Format

Transparency Support

WebM

Chrome, Firefox, Edge

MOV

Safari

WebM + MOV linked

All modern browsers

Devices automatically select the correct format.

Additional notes

  • Existing transparent videos continue to work without changes.

  • Deleting a linked video removes all associated formats.

  • Transparency cannot be recovered after MP4 conversion.

Ready to start designing?

👉 Sign up for a free Bannersnack account – it only takes a minute.
👉 Already have an account? Log in here to continue where you left off.

Did this answer your question?