Why isn't my video displaying on the page in Webflow when I populate the video element from the CMS?
TL;DR
- Ensure the CMS uses a Video field with a valid YouTube or Vimeo URL and bind it to a Video element.
- For other video sources or embed codes, use a Text field with an Embed element, and confirm all data is correctly entered and the site is published to view changes.
If your video isn't displaying in Webflow when connected to the CMS, it's likely due to a mismatch between the CMS field type and the element, incorrect formatting, or missing data.
1. Confirm Field Type in CMS
- Go to CMS → Collections → Collection Fields and confirm that the field you’re using is a Video field type.
- If you're using a Plain Text field instead, it won’t work properly with Webflow's Video element. Use a Video field for embedding YouTube/Vimeo URLs.
2. Use Correct Element for Binding
- The Video element in Webflow only works with a CMS field of type Video.
- If you're using a Text field with an embed code or custom URL, use an Embed element instead and pull the field in with Add Field → CMS field name.
3. Check for Supported Video Sources
- Webflow's native Video element only supports YouTube or Vimeo links.
- Other platforms (e.g., Wistia, self-hosted MP4s) need to be embedded via a Custom Embed code.
4. Verify the URL Format
- Make sure the video URLs stored in your CMS are full URLs, such as https://www.youtube.com/watch?v=...
- Avoid shortened URLs or embed scripts in a Video field — those should go in Text fields paired with the Embed element.
5. Test with Static Content
- Temporarily replace the dynamic CMS data with a static URL (e.g. from YouTube) in the Video element to confirm the issue is related to CMS binding.
6. Check CMS Item Visibility
- Ensure the Collection List or Collection Page displaying the video is correctly bound and the item has a video URL populated.
- If the field is empty for that item, nothing will render in the Video element.
7. Publish the Site
- Some video embeds don’t render correctly in Webflow’s Designer preview — publish your site to see if the video appears live.
Summary
To display a CMS-bound video correctly in Webflow, use a Video field with YouTube or Vimeo URLs, connect it to a Video element, and ensure the CMS item has valid data. For other platform types or custom embeds, use a Text field + Embed element combination.