Is it possible to use the "video background" div block with CMS items in Webflow and upload videos to CMS items for dynamic calling in a template?
TL;DR
- Upload your .mp4 videos to an external host and store their direct URLs in a CMS field.
- Use an Embed element inside a Div Block to insert a dynamic <video> tag pulling the hosted URL from the CMS, then style the video as a background.
Webflow does not currently support direct video file uploads to CMS items, so using the Video Background element dynamically with CMS content requires a workaround using external video hosting.
1. Understand CMS Video Limitations
- Webflow does not allow video file uploads (like .mp4) directly to CMS fields.
- You can only use Video Link fields that support URLs from YouTube or Vimeo.
- The Video Background element specifically requires a hosted .mp4 video file, not a YouTube or Vimeo link.
2. Host Your Videos Externally
To create dynamically loaded background videos, you must:
- Upload your .mp4 videos to an external hosting service (e.g., Amazon S3, Bunny.net, or Dropbox with direct file access).
- Ensure the video URLs end in
.mp4,.webm, or.oggand are publicly accessible.
3. Add a Plain Div Instead of the Native Video Background
- The native Video Background element in Webflow cannot reference CMS fields.
- Instead, create a custom div and add a video element inside it using an Embed component.
4. Use an Embed with Dynamic Source
- Add a Rich Text or Embed field to your CMS collection.
- Paste this video embed code using an Embed element inside your CMS template:
Example:
- Use:
<video autoplay loop muted playsinline loading="lazy"><source src="https://yourhost.com/videos/{{wf {"path":"video-url","type":"PlainText"} }}" type="video/mp4"></video>
- Replace
"video-url"with your actual CMS field slug that stores the direct .mp4 URL.
5. Apply Styling to Mimic Video Background
- Set the video element’s position to absolute, full width & height, and z-index below content.
- Set the parent container’s position to relative to contain the video.
Summary
You cannot directly use the Video Background element with CMS items, but you can replicate the functionality by hosting your videos externally, storing their URLs in the CMS, and embedding a dynamic <video> element using a regular Div Block and the Embed component.