EN IT
Home About Learn Blog

Custom Video Popup in Webflow, No Code & Autoplay

Intermediate 27:16 webflowpopupvideono-codecmsattributes

Build a no-code custom video popup in Webflow: autoplay on open, auto-pause on close, scroll lock, and CMS binding — all driven by custom attributes.

Watch on YouTube

Key takeaways

  • The whole solution runs on one attribute — fc-video-popup — with different values (component, open, close, play), so your class names and naming convention don''t matter at all; only the attributes do.
  • The single most important setting is the iframe src, and this solution only works with Vimeo — grab the embed URL and trim everything from the first question mark onward.
  • One "close" value does double duty: put it on both a full-bleed overlay behind the video and on the close button, so people can dismiss the popup by clicking outside the video, not just on the X.
  • Multiple popups on one page must share a single script embed — duplicating it redefines the same variables and creates conflicts, so keep only the last script and delete the rest.
  • Turning attribute values into component properties is what makes one popup reusable across pages and the CMS — just remember a video link needs a plain-text field, not a link field.

Video chapters

  1. 00:00 Intro
  2. 01:37 Explaining custom popup structure and attributes
  3. 12:05 Choosing a button to open the popup
  4. 13:48 Two buttons to open the same popup
  5. 15:02 Two popups inside the same page
  6. 18:59 Turn the custom popup into a Webflow component
  7. 24:17 Link the custom popup component properties to the CMS
  8. 26:33 Outro

Build a custom video popup in Webflow that just works: click a trigger and it fades in with the video already playing, click outside the video (or the close button) and it fades out and pauses. No writing code — the entire thing is driven by a handful of custom attributes, so you configure everything straight from Webflow’s settings panel.

And it goes further than a single popup. You can add as many open triggers as you want, run several different popups on one page, set the fade’s easing and duration, then turn the whole thing into a component and bind it to the CMS — so each project or collection item shows its own video and thumbnail.

The nicest part is how little you have to think about. Your class names and naming convention are completely irrelevant; the script only ever looks at the attributes. Label the pieces, drop in your Vimeo link, and you’re done.

How it works

The popup is one overlay element carrying fc-video-popup="component". It’s position: fixed, covers the whole viewport, sits at a high z-index, and starts at display: none so it’s hidden until triggered. Two optional attributes tune the animation: easing sets the fade’s easing curve (defaulting to ease) and duration sets its length in milliseconds (defaulting to 300). Neither is required — leave them off and the sensible defaults kick in.

Inside the overlay, the same attribute name does every job — only the value changes. A full-bleed close overlay sits behind the video with fc-video-popup="close", and the actual close button carries that same value, so a click anywhere outside the video dismisses the popup. The custom play button (which fades in if you pause the video) gets fc-video-popup="play". And any element on the page you want to open the popup — a link block, a button, whatever — gets fc-video-popup="open". That’s the whole mental model: one attribute, four roles.

The video itself is a Webflow custom element switched to the iframe tag (set the tag to iframe in the element settings). Its src is the most important value in the setup, and right now the solution is built for Vimeo: open the video on Vimeo, hit Share, open the embed tag, and copy the link up to the first question mark. That trimmed URL is what goes in src. The iframe also keeps a frameborder and an allow attribute — you don’t need to understand the allow value, just leave it as-is so the embed behaves.

Two gotchas are worth internalizing. First, multiple popups on one page: duplicate the overlay and bump its value to component-2, component-3, and so on, wiring each trigger with open — but the script embed defines shared variables, so a duplicate script conflicts with itself. Keep exactly one script on the page and delete the others. Second, once you make it a component, expose the pieces you want to vary — the component name (the fc-video-popup value), easing, duration, the iframe src, the thumbnail, and the script’s visibility — as component properties, then hide the extra scripts via that visibility property when you place more than one instance.

How to use it

  1. Clone the project. Grab the Webflow cloneable — it ships with the full structure, styling, and the commented popup script, plus an attributes reference at the bottom of the page. It’s built on the free ScrollVibe template.

  2. Point it at your video. Select the iframe inside the iframe wrapper and set its src to your Vimeo embed URL — copy the link from Vimeo’s embed tag and trim it right before the first ?.

  3. Add a trigger. On any element that should open the popup, add fc-video-popup="open". You can add this to as many elements as you like; they’ll all open the same popup.

  4. Tune the animation (optional). On the popup overlay, add easing with a value from the MDN easing-function reference and/or duration in milliseconds. Skip them and you get ease at 300ms.

  5. Add more popups on the page. Duplicate the overlay, change its value to component-2 (then component-3…), give its trigger fc-video-popup="open", and swap in a different video source and thumbnail. Then delete every popup script except the last one so they don’t conflict.

  6. Make it a component + CMS. Right-click the overlay and create a component. Expose the component name, easing, duration, iframe src, thumbnail, and script visibility as properties. To drive it from the CMS, bind the video link to a plain-text field (not a link field) and the thumbnail to an image field — publish, and each item plays its own video.

Configuration reference

Attribute Values Default What it does
fc-video-popup component · component-2 · open · close · play — The role marker the whole solution reads. Put "component" on the popup overlay (use "component-2", "component-3"… for extra popups on the same page), "open" on any element that should trigger it, "close" on the close button and on the overlay behind the video, and "play" on the custom play button.
easing a CSS easing function (ease, ease-in, ease-out, ease-in-out, or a custom curve) ease The easing applied to the popup's open and close fade. Optional — leave it off and it falls back to ease.
duration milliseconds 300 How long the opening and closing animations take, in milliseconds. Optional — leave it off and it defaults to 300.

Resources

Frequently asked questions

How do I make a video play automatically when a popup opens in Webflow?
Wrap the video in an iframe inside the popup, then mark your trigger element with the attribute fc-video-popup="open". The script starts playback the moment the popup appears and pauses it again when the popup closes — no interactions to wire up by hand.
Does this custom video popup work with YouTube videos?
Not right now — the solution is built for Vimeo. Open the video on Vimeo, use its embed link as the iframe source, and cut the URL off before the first question mark. YouTube or self-hosted support may come in a future update.
Can I put more than one video popup on the same Webflow page?
Yes. Duplicate the popup and change its fc-video-popup value from component to component-2 (then component-3, and so on), and give each trigger the open value. The one catch: keep a single copy of the script embed on the page — extra copies clash, so delete all but the last.
How do I close the popup by clicking outside the video, not just the button?
Add a full-bleed overlay div behind the video and give it fc-video-popup="close" — the exact same value you put on the close button. Any click that lands outside the video hits the overlay and dismisses the popup, which feels natural to most visitors.
How do I connect the video popup to the Webflow CMS?
Turn it into a component and expose the video link and thumbnail as properties. Bind the link property to a plain-text CMS field (a link field will not pass a value to the attribute) and the thumbnail to an image field, and every collection item drives its own video.

← Back to the course

Also part of these courses