You can embed videos in a Webflow blog using the CMS API, but certain types of HTML embeds or video URLs may cause issues depending on the field type and Webflow’s embed limitations. Here's how to handle it correctly.
1. Understand Webflow Field Requirements
- When using the Create Collection Item API, make sure you're assigning values to the correct field type in your CMS collection.
- For embedded videos:
- Use a Video field if you're entering standard video URLs (e.g., YouTube, Vimeo).
- Use a Rich Text field or Plain Text field if embedding custom embed HTML (like an iframe).
- Use an Embed element inside your blog Template Page to render actual embed code from CMS.
- If your CMS uses a Video field, you must pass a clean video URL, such as
https://www.youtube.com/watch?v=abc123
. Most streaming platforms support this. - If your CMS uses a Rich Text field, you can inject basic HTML (e.g.,
<iframe>
tags), but: - Webflow sanitizes certain tags, especially in Rich Text fields, which can strip or modify unsupported code.
- Not all iframe sources are allowed—some third-party players may trigger CORS or security issues.
3. Understand Why You're Getting Errors
- If you're receiving an error when embedding video links:
- You're likely pasting unrecognized or unsupported URLs into a Video field. Only standard YouTube/Vimeo links are accepted here.
- You might be injecting full
<iframe>
code into a Plain Text field or a Video field, which Webflow cannot render. - Your embed source may not be allowed by Webflow’s embed policy (e.g., due to CSP, X-Frame-Options, or lack of HTTPS).
4. Best Practice for Embedding via API
- Use the CMS API to push the video URL into a Video field, like this:
youtube.com/watch?v=exampleID
. - For custom embed HTML (like an iframe), push the code into a Plain Text or Rich Text field, then render it in your template using a Webflow Embed element with fields inserted via
Add Field
(e.g., Add Field > rich-text or plain-text
).
Summary
You can add videos to a Webflow blog using the CMS Create Item API, but the field type and format must align with what Webflow expects. Use video URLs for Video fields and HTML embed strings in Text or Rich Text fields, then render them with Embed elements in Webflow. Errors typically occur due to invalid field types or unsupported video URLs.