How can I connect to the Vimeo API in my Webflow CMS template to display embedded videos?
TL;DR
- Use Make.com or a custom script to fetch Vimeo video data via the Vimeo API and update your Webflow CMS with video title, ID, and embed URL.
- In your CMS template, use a dynamic Embed element to insert the Vimeo iframe using the stored Video ID.
To connect to the Vimeo API in a Webflow CMS template, you'll need to fetch data outside of Webflow (like via Make or a custom script) and embed the Vimeo video links properly using the CMS.
1. Understand Webflow’s Limitations
- Webflow CMS can't make API requests directly—you need to use tools like Make (formerly Integromat), Zapier, or a custom JavaScript + external database.
- You can store Vimeo video IDs or full embed URLs in Webflow CMS and use that in your design.
2. Get Data from Vimeo API
- Use the Vimeo API (https://developer.vimeo.com/api/reference/videos) to query for video info.
- Tools like Make or a custom backend (e.g., using Node.js or Google Apps Script) can query the Vimeo API.
- Use the endpoint
https://api.vimeo.com/videosto search or retrieve video metadata like title, embed URL, or thumbnail.
3. Populate Webflow CMS with Vimeo Data
- Use Make.com to automate Vimeo API calls:
- Trigger: Manual or scheduled.
- Action: Call Vimeo API with OAuth token to get video data.
- Action: Create or update Webflow CMS items with fields like Video Title, Video ID, or Embed Link.
- Ensure your CMS Collection includes:
- Video Title (Plain Text)
- Vimeo Video ID (Plain Text)
- Embed URL or constructed embed code (Plain Text or Embed field)
4. Embed Video in CMS Template
- In your CMS template page:
- Add an Embed element.
- Inside it, insert Webflow’s dynamic embed using the Video ID:
Example Vimeo embed:
<iframe src="https://player.vimeo.com/video/[Video ID]?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen loading="lazy"></iframe>
- Replace
[Video ID]with the dynamic field using Webflow’sAdd Fieldoption in the Embed menu.
5. Optional: Display Additional Info
- You can also pull title, thumbnail, duration or other metadata from Vimeo into Webflow via Make or your script.
- Use Collection fields to show custom thumbnails, titles, or descriptions next to your embedded player.
Summary
To embed Vimeo videos dynamically in Webflow CMS, fetch Vimeo video data using the Vimeo API via Make, store that data in CMS fields like Video ID, and then use a dynamic Embed element in your CMS template to render the Vimeo iframe.