Vimeo

Webflow builds and hosts your pages, and a video library needs a host of its own. An uploaded file is fine for a short looping clip, but a catalog of long-form video needs transcoding and global delivery that should not run through your site plan's bandwidth. Webflow also ships a dedicated element for YouTube video, while Vimeo runs through the general Video element instead.

Vimeo covers the hosting side of that split. Paste a Vimeo link into Webflow's Video element or a CMS Video field and you get a responsive player with no code involved. Past that point, player parameters and both platforms' APIs give you control over how the player behaves and how new uploads reach your Collections.

Videographers and studios use the pairing for portfolio sites built around a large library. Marketing teams use it for product demos and silent hero video on landing pages.

How to integrate Vimeo with Webflow

What is Vimeo? Vimeo is a video hosting and management platform. Its player is ad-free on every plan, including the free one, and it streams up to 4K with HDR support. Vimeo also ships automatic captions, engagement analytics, a JavaScript player SDK, and a REST API for programmatic video management.

Teams reach for Vimeo when a Webflow site carries more video than direct uploads can. Vimeo stores and transcodes the files, Webflow holds the content model and the design, and the join between them can be as thin as a pasted URL or as thick as a server-side sync.

The Vimeo and Webflow integration supports four approaches:

• The Video element and CMS Video field take a pasted Vimeo URL and render a responsive player without any code.
• Code Embed elements let you append Vimeo's player parameters and drive the player from its JavaScript SDK.
• Zapier and IFTTT turn a new Vimeo upload into a Webflow Collection item without anyone opening the CMS.
• The Webflow Data API and Vimeo API put uploads, embed privacy, and publish timing under your own code, at the cost of server-side work.

Most builds start with the first two, then add automation or API code once the library outgrows manual entry.

Embed videos with the Video element and CMS Video field

Pasting a Vimeo URL into Webflow is the whole method, and it is the one most sites should use. The Video element embeds a single Vimeo video anywhere on a page and stays responsive by default, and the CMS Video field does the same job inside a Collection, so one template renders a different video per item. Neither needs code or a paid Vimeo plan.

Check the video's privacy setting before you build. Private videos cannot be embedded at all, and Unlisted videos only work when the URL keeps its privacy hash.

Add a single video with the Video element

Use this for one-off embeds on static pages, like an about page or a case study.

To embed a video:

1. In Vimeo, open the video, click Share, then Embed, and confirm the embed privacy setting allows your site.
2. In Webflow, open the Add panel and drag a Video element onto the canvas, or press Command + E on Mac or Control + E on Windows and search for the video element.
3. Paste the Vimeo URL, add an optional title, and press Enter.

The element respects its parent container across breakpoints. It does not expose Vimeo's URL parameters, so autoplay and hidden controls need a Code Embed element instead.

Populate video galleries with the CMS Video field

Use this when the videos are content, like a portfolio or a resource library.

To build a CMS-driven gallery:

1. Add a Video field to a CMS Collection.
2. Paste a Vimeo URL into that field on each Collection item.
3. Bind a Video element inside a Collection List, or on a Collection page, to the field.

Conditional visibility keeps the player out of items with an empty field, which matters the moment an editor saves a draft without a video. Rich text fields auto-embed Vimeo too: on a new line in the editor, open the plus insert menu, choose the video option, and paste the URL.

Customize playback with Code Embed elements

Player parameters are where a Code Embed element earns its place, because the Video element does not surface them. Paste Vimeo's iframe code, append parameters to the player URL, and the embed behaves exactly as configured. A Code Embed element accepts up to 50,000 characters of HTML, CSS, and JavaScript, and it needs a paid site plan or a paid Workspace.

One warning from doing this on a lot of sites: do not reach for a Code Embed element where the Video element would do. You give up the responsive behavior Webflow handles for you, then rebuild it by hand with a wrapper and an aspect-ratio hack.

Paste the iframe with player parameters

This is the route to silent autoplay and to chromeless hero video.

To customize an embed:

1. In Vimeo, open Share, then Embed, and copy the embed code.
2. Append player parameters to the iframe URL, such as autoplay=1&muted=1 for silent autoplay or controls=0 for a chromeless player.
3. In Webflow, add a Code Embed element to the canvas, paste the code, and save the embed.

For hero sections, background=1 switches off every player control and sets autoplay, mute, and loop for you. Autoplay, mute, and loop work on any Vimeo account, while hidden controls, background embeds, custom player colors, and logo removal all need a paid Vimeo plan. Vimeo's own parameter table still lists retired tier names such as Plus, Pro, and Business next to the current ones, so read those gates as paid versus free rather than as a specific tier.

Control the player with the Vimeo Player SDK

The Vimeo Player SDK is a JavaScript library for driving an embedded player from your own code, and everything runs client-side, so no backend is involved.

To wire it up:

1. Load the library with <script src="https://player.vimeo.com/api/player.js"></script> in a Code Embed element, or site-wide through custom code in head and body tags.
2. Initialize the player against your existing iframe with var player = new Vimeo.Player(iframe);.
3. Attach listeners such as timeupdate and ended to react to playback.

Those two events are what turn a video into progress tracking, like marking a lesson complete once playback finishes.

Automate CMS updates with Zapier or IFTTT

Creating a CMS item by hand for every upload stops scaling after a handful of videos, and Zapier and IFTTT both connect to Vimeo and Webflow already. Zapier publishes ready-made templates for the pairing, and IFTTT keeps a Webflow and Vimeo page listing the triggers and actions available on both sides.

Flows worth copying:

• New video to new CMS item: Zapier's template creates a Collection item whenever a video is added in Vimeo, which is the flow most video galleries need.
• New video to live item: A second template creates the item live, so the gallery updates without a manual publish step.
• Order to upload: An updated Webflow order can push a video into Vimeo, which suits paid downloads and client deliverables.
• Live event to publish: IFTTT can fire Webflow's Publish site action from Vimeo's New live event trigger, though that trigger sits on the Vimeo Live API, which Vimeo limits to Enterprise accounts with events enabled.

Automation is the right stopping point for most teams. Move to the APIs only when field mapping or publish timing has to be exact.

Build with the Webflow and Vimeo APIs

Programmatic uploads and metadata sync run through both platforms' APIs. Webflow does not execute backend code, so the Vimeo calls belong in a serverless function or on a server you control, and both APIs authenticate with OAuth 2.0 bearer tokens. Free Vimeo accounts have to request API upload access from the My Apps page and wait up to five business days for review, while paid plans are approved automatically.

What each piece covers:

• Vimeo API: Calls to https://api.vimeo.com handle uploads, metadata, and per-video embed privacy, and the Vimeo API reference documents each endpoint.
• Webflow Data API: The Webflow Data API covers Collection items from staged draft through live publish, writing into the Webflow CMS fields your template reads.
• Transcode status: The transcode.status field on the video response is how you learn a file is ready, because Vimeo sends no push notification when transcoding finishes.
• Rate limits: Vimeo caps requests per minute by account level and returns a 429 once you cross it, so trim responses with the fields parameter and back off instead of retrying immediately, as its rate limit guidance sets out.

Set the credentials up in that order. Create your Vimeo API app first, then generate a Webflow site token under Site settings, Apps and integrations, API access.

Sync new Vimeo videos into the Webflow CMS

This is the code-level version of the Zapier flow, with field mapping and publish timing under your control.

To build the sync:

1. After the upload finishes, poll GET https://api.vimeo.com/videos/{video_id} and read transcode.status on the response.
2. Once that status returns complete, pull the title and embed data you need from the same payload.
3. Create the item with POST https://api.webflow.com/v2/collections/{collection_id}/items, mapping your values into fieldData, which requires name and slug.
4. Publish it with POST https://api.webflow.com/v2/collections/{collection_id}/items/publish.

Pick a polling interval you can live with, and branch on all three values of transcode.status, since error and in_progress both mean the CMS item should wait.

Restrict embeds to your Webflow domains

For gated or member-only video, lock each video's embeds to domains you own.

To manage the allowlist:

1. Set privacy.embed to whitelist with PATCH https://api.vimeo.com/videos/{video_id}.
2. Add each permitted domain with PUT /videos/{video_id}/privacy/domains/{domain}.
3. Audit entries with GET /videos/{video_id}/privacy/domains and remove stale ones with the matching DELETE call.

Webflow serves your site on more than one hostname at once, the yoursite.webflow.io staging domain and your custom domain, and Vimeo's allowlist tops out at 50 domains with no wildcard support. Add both hostnames on day one. A privacy error that only shows up during launch prep looks like a Webflow bug and is almost always a missing allowlist entry.

What you can build with the Vimeo Webflow integration

Vimeo and Webflow together let you run high-resolution video across a whole site without owning a transcoding pipeline.

Patterns that hold up in production:

• CMS-driven video galleries: An automation flow creates a Collection item per upload, and a Collection List renders the grid, which is the pattern behind this director portfolio site on Made in Webflow.
• Video-heavy portfolio sites: Pixerry Studio rebuilt the Denee Motion wedding site on Vimeo embeds and reports 10+ videos on the homepage at a 97 average Lighthouse score across performance, accessibility, best practices, and SEO.
• Gated course platforms: Collections structure the courses and lessons, Vimeo's domain-restricted embeds deliver the video, and the Player SDK marks a lesson complete when playback ends.
• Event sites with recording archives: An event website holds the logistics and speaker bios, with a recordings section that fills up from Vimeo once the talks are edited.

If uploads or embed privacy have to be programmatic, the API path covers both. Read our walkthrough on getting started with the CMS API for the request patterns you will reuse here. Then connect the Webflow MCP server so an agent can update and publish those video Collection items for you instead of doing it by hand.