How to set up Cloudinary video transcoding on Webflow Cloud

The guide shows that a Next.js app hosted on Webflow Cloud can upload videos directly to Cloudinary via fetch, bypassing the Node.js SDK that fails on the Cloudflare Workers edge environment. By configuring an unsigned upload preset called webflow_video with eager transforms sp_auto,f_m3u8|vc_auto,f_mp4, the service pre‑generates both HLS playlists and fallback MP4 files at upload time. This prevents the 423 “locked” response that occurs when a viewer requests an HLS URL before Cloudinary finishes on‑demand processing. The solution relies on three environment variables—cloud name, preset name, and a public cloud name—and requires no extra npm packages, keeping the edge‑runtime bundle lightweight.

This approach reflects a broader shift toward server‑less video pipelines that run entirely on CDN‑backed APIs rather than heavyweight SDKs. Cloudinary’s URL‑based transformation model aligns with other edge‑centric platforms that favor stateless, fetch‑based integrations, and Webflow Cloud’s reliance on Cloudflare Workers underscores the industry’s move to run application logic at the edge for latency gains. By exposing the full upload and delivery flow through REST, the integration sidesteps compatibility issues that have plagued Node‑centric libraries on constrained runtimes, positioning both services as flexible building blocks for modern JAMstack video experiences.

Looking ahead, developers must monitor the security trade‑offs of unsigned uploads, especially for public‑facing sites where malicious actors could abuse the open preset. The reliance on eager transforms also means upload latency may increase, as Cloudinary processes two output formats before returning. Finally, any future changes to Cloudinary’s REST endpoints or Cloudflare Workers’ fetch semantics could require updates, so teams should embed version checks and fallback logic to maintain reliability.