Custom video popups are one of those things that seem simple… until you try to make them flexible, reusable, and easy to maintain.

In this lesson, we build a custom video popup in Webflow using only attributes + Webflow’s Custom Element, no custom coding required on your side.

You’ll see how to:

• Open a popup and autoplay a Vimeo video
• Pause the video when the popup is closed
• Use multiple buttons to trigger the same popup
• Add multiple popups on the same page
• Turn the whole thing into a Webflow component
• Connect the component to the CMS for dynamic content
  

All of this is powered by a small script (already included in the project) and a set of simple, consistent attributes. Your main job is just to structure the popup correctly and apply the right attributes to the right elements.

Project setup and goal

We start from the free Scrollvibe Webflow template and identify the element that will open our popup (the “Trailer” link sitting on top of the background video).

Our goal:

• When the user clicks the button, a popup overlay appears
• The Vimeo video inside the popup starts playing automatically
• The popup can be closed by:
  • Clicking a close button
  • Clicking anywhere on the overlay background
• When the popup closes, the video pauses automatically
• Page scrolling is disabled while the popup is open
  

All the logic is handled by a script that lives inside the component, but you only need to work with the attributes.

The popup overlay component and core attributes

The heart of the solution is the popup overlay element – our actual “component”.

Key settings:

• position: fixed
• All offsets set to 0 to cover the whole viewport
• High z-index to sit on top of everything
• display: none initially (hidden by default)
  

The important part is the attribute:

• fc-video-popup="component"
  

This tells the script: “this is the main popup component”.

We also add two optional attributes:

• easing="cubic-bezier(...)"
  • Defines the easing function for the open/close animations
  • If omitted, the default is ease
  • Values can be taken directly from the MDN easing functions list
• duration="300"
  • Duration (in milliseconds) of the open/close animation
  • Default is 300 if you don’t set it
    

These attributes let you tweak the “feel” of the popup without touching the code.

Closing the popup: overlay and close button

Inside the popup overlay we have:

1. Popup close overlay
   • A div absolutely positioned with all offsets set to 0
   • Covers the entire popup background
   • Attribute:
     • fc-video-popup="close"
   • This allows users to close the popup (and pause the video) by clicking anywhere outside the video.
2. Popup close button
   • A simple link block inside the popup
   • Same attribute:
     • fc-video-popup="close"
   • Clicking this button also closes the popup and pauses the video.
     

As long as an element has fc-video-popup="close", it will act as a close trigger.

The iframe and video configuration (Vimeo only)

The core of the popup is a Webflow Custom Element turned into an iframe.

Steps:

1. Add a Custom Element
2. In the Element Settings, set the Tag to iframe
3. Set the src attribute with the link to your Vimeo embed
   

To get the correct Vimeo link:

• Open the video on Vimeo
• Click Share → Embed
• Copy the URL inside the embed code
• Paste it into the src attribute
• Stop before the first ? in the URL (if present)
  

Additional attributes:

• frameborder="0" – no border around the iframe
• allow="..." – a long value that ensures autoplay and proper video behavior
  

Important: in this version, the solution only supports Vimeo.

If you need YouTube or self-hosted video, the script would need an update.

Thumbnail and custom play button

On top of the iframe we have:

• A thumbnail image, used as the “video cover”
• A custom play button, with the attribute:
  • fc-video-popup="play"
    

Behavior:

• When the video is paused, the thumbnail and the custom play button fade in
• When the user clicks the play button, the video starts playing again and the overlay fades out
  

This gives you a more branded, controlled player experience instead of relying only on the default Vimeo controls.

Connecting triggers to the popup

To open the popup we simply add:

• fc-video-popup="open"
  

…to any element we want to use as a trigger.

Examples:

• The main “Trailer” link on top of the hero video
• Another button further down the page (“Watch Trailer”)
  

Both can open the same popup as long as:

• They have fc-video-popup="open"
• They live on a page where a popup component instance uses fc-video-popup="component" (or a variant, see below)

Multiple popups on the same page

To add more popups on the same page:

1. Duplicate the popup overlay element
2. For the second instance, change the attribute from:
   • fc-video-popup="component"
   • to:
   • fc-video-popup="component-2"
3. Add fc-video-popup="open-2" to the trigger that should open this second popup
4. Update the src of the iframe and the thumbnail image
   

One crucial detail:

• The popup script element (the Custom Code embed) must exist only once on the page.
• If you duplicate the popup, delete the script in all instances except one, otherwise you’ll create conflicts.

Turning the popup into a Webflow component

To reuse the solution across pages, we turn the popup overlay into a Webflow component.

Inside the component we create properties for:

• fc-video-popup value → Component Name
  • e.g. component, component-2, component-3…
• easing attribute → Easing
• duration attribute → Duration
• src attribute of the iframe → Video Link
• Thumbnail image → Thumbnail
• Script visibility → Script Visibility (to hide the script in duplicate instances)
  

This way, every instance of the component can have:

• Its own video source
• Its own thumbnail
• Its own easing/duration
• A unique component name
  

…and you can decide which instance should actually render the script.

Connecting the popup to the CMS

On the CMS side we use a simple Collection with fields like:

• Project video link (Plain Text) – holds the Vimeo embed URL used as the iframe source
• Video thumbnail (Image) – used as the popup thumbnail
  

On the Collection Template page:

1. Drop the popup component on the page
2. Bind Video Link property to the Project video link field
3. Bind Thumbnail property to the Video thumbnail field
4. Keep using fc-video-popup="open" on the triggers inside the template
   

Result:

• Each project detail page gets its own video popup, powered by CMS data
• You can manage videos and thumbnails directly in the Collection

Recap

By the end of the lesson you’ll have a reusable, CMS-ready video popup that:

• Autoplays and pauses Vimeo videos correctly
• Can be opened from multiple triggers
• Supports multiple popups on the same page
• Lets you configure easing and duration from attributes
• Is fully component-based and CMS-driven
  

All without writing custom code in the Webflow Designer – just attributes and a ready-made script embedded in the project.