Why isn't my video displaying on the page in Webflow when I populate the video element from the CMS?
TL;DR
- Use a Video field with valid YouTube or Vimeo links and bind it properly in the Video element's settings.
- Confirm the link format is correct, video privacy allows embedding, and layout/visibility settings aren’t hiding the element.
If your video is not displaying on your Webflow page when connected via the CMS, several common issues may be responsible. Here's how to troubleshoot it.
1. Ensure You're Using the Correct Video Field
- In the CMS Collection, make sure you're using a Video field or a URL field intended for embedding supported platforms like YouTube or Vimeo.
- The Video field in Webflow only supports YouTube and Vimeo links—direct .mp4 file links will not work.
2. Double-Check the CMS Binding
- Select the Video element in the Designer.
- In the Element Settings panel (D key), make sure the "Get video from" is set to the correct CMS field.
- If you're using a Video field, you don't need any additional embedding logic—Webflow handles the embed automatically.
3. Verify the Video URL Format
- Ensure the CMS field contains a direct video link from YouTube or Vimeo, not a shortened or private/share link.
- For example:
- Valid YouTube:
https://www.youtube.com/watch?v=abc123 - Valid Vimeo:
https://vimeo.com/123456789 - Invalid examples:
- YouTube Shorts or playlist links
- Vimeo private links without public access
4. Check Privacy or Embed Permissions
- If you're using a Vimeo link, make sure the video’s privacy settings allow embedding on external sites.
- On YouTube, ensure embedding isn't disabled by the uploader.
5. Test With a Static Video Link
- As a test, remove the CMS binding and paste a known valid YouTube link directly into the Video element.
- If it displays, the issue is likely with the CMS content. If not, it may be a layout or visibility issue.
6. Inspect Layout and Visibility Settings
- Make sure the Video element or its parent containers:
- Are not set to Display: None
- Do not have a height of 0
- Are within the visible viewport
- Check for conditional visibility based on CMS values that might be hiding the element unintentionally.
Summary
If your CMS-bound video isn't showing, confirm it's from YouTube or Vimeo, the field is bound correctly, and the layout doesn't hide it. Also ensure that the video’s privacy settings allow external embedding.
