Webflow sync, pageviews & more.
NEW

What is the purpose of being able to upload .webm files in Webflow if only .mp4 files are served as background videos?

TL;DR
  • Webflow converts background videos to and serves only .mp4 for compatibility, ignoring any uploaded .webm files.
  • .webm files can be uploaded for use in custom embeds, allowing optimized delivery when both .webm and .mp4 formats are included manually.

Webflow allows uploading .webm files, but for background videos it only serves .mp4 files by default, which raises confusion. Here's the purpose and context.

1. Webflow Converts Background Video Files to .mp4

  • When you upload a background video, Webflow automatically converts and serves it only as .mp4, because it ensures broader browser compatibility.
  • The .webm version is not used or served for background videos, even if it's uploaded.

2. .webm Uploads Are Relevant for Custom Builds

  • You can upload .webm files for other custom uses in Webflow, such as when embedding a video manually using a custom code embed.
  • In these custom cases, using both .mp4 and .webm allows you to serve optimized formats to modern browsers while maintaining fallback support.

3. Why Webflow Accepts .webm Files

  • Asset flexibility: Webflow's asset uploader accepts .webm files because users may use them for custom coding, non-background use cases, or third-party integrations.
  • Future-proofing: Webflow may allow developers and designers to create optimized performance environments using newer file formats like .webm.

4. Serving .webm in Custom Embeds

  • If you're embedding a video with a <video> element in a Custom Code block, you can manually add both .webm and .mp4 versions:
  • Browsers like Chrome and Firefox prefer .webm for its smaller size.
  • Safari and older browsers require .mp4.

Summary

Webflow only serves .mp4 files for background video components, but allows uploading .webm files for custom usage through embed code or assets. This supports optimized delivery for browsers that support .webm, while maintaining compatibility.

Rate this answer

Other Webflow Questions