Why isn't my video displaying on the page in Webflow when I populate the video element from the CMS?
TL;DR
- Use a Text field in your CMS with a valid YouTube or Vimeo URL, not a direct video file link.
- Ensure the Video element is inside a connected Collection List, and republish the site after making corrections.
If your video isn't displaying on the page after connecting a Video element to a CMS field in Webflow, it's usually due to incorrect field content or an unsupported format.
1. Check CMS Video Field Content
- Ensure you are using the correct video URL. For the Webflow Video element connected to CMS, the URL must be from YouTube or Vimeo only (not a .mp4 file or other services).
- If you pasted a direct video file link (e.g., ending in .mp4), it won’t work with the Video element.
- Example of valid entries:
- YouTube:
https://www.youtube.com/watch?v=dQw4w9WgXcQ - Vimeo:
https://vimeo.com/123456789
2. Use the Correct CMS Field Type
- The CMS collection should contain a plain Text field, not a Media or File field.
- Webflow’s Video element can only bind to a Text field containing a YouTube/Vimeo URL.
- If you're using a File or Video upload field (or uploading via Asset Manager), it won’t work with the native Video element.
3. Confirm Collection List Binding
- Make sure the Video element is placed inside the Collection List that's connected to your CMS collection.
- If the element is placed outside of the collection context, the video won’t display since it doesn't know which record to pull from.
4. Test the URL Outside Webflow
- Paste the exact URL from the CMS field into a browser to confirm that it loads and plays properly. If it doesn't play there, it won’t work in Webflow either.
5. Clear Cache or Republish Site
- After making corrections, republish your site to ensure the CMS changes reflect properly.
- You may also need to clear your browser cache to view the latest version.
Summary
To display a CMS-bound video in Webflow, ensure the CMS field is a Text field containing a valid YouTube or Vimeo URL, and that the Video element is placed inside the correct Collection List. Webflow does not support direct video file links (e.g., .mp4) in the Video component. Republish your site after making changes.