How to Build a Custom Video Popup in Webflow

This tutorial provides a comprehensive guide to engineering sophisticated custom video popups within Webflow, transforming static elements into dynamic, professional-grade interfaces. By leveraging a specific set of custom attributes rather than complex manual coding, the presenter demonstrates how to create a seamless user experience where videos automatically play upon opening and pause immediately when the popup is closed or the background is clicked. The core value lies in the robustness and flexibility of the solution, which supports custom easing functions, animation durations, and specific behavioral triggers to ensure the interface feels polished and responsive.

The technical instruction focuses on the precise architecture of the popup component, utilizing a specific naming convention for attributes like fc-video-popup to define the component, its triggers, and close buttons. Viewers will master the implementation of iframe elements to embed Vimeo content, ensuring proper source linking and frame behavior. Furthermore, the video addresses complex scenarios, such as assigning multiple trigger buttons to a single popup and managing multiple distinct popup instances on a single page by utilizing unique attribute values (e.g., component-2) and properly managing script execution to prevent code conflicts.

Ultimately, the viewer achieves a scalable, CMS-ready workflow. The tutorial concludes by converting the custom element into a reusable Webflow Component with dynamic properties for video links, thumbnails, and script visibility. This allows users to bind the popup directly to Webflow’s CMS Collections, enabling the automatic population of video content across template pages without manual reconfiguration. This empowers designers to deploy high-end video interactions globally across a site with efficiency and consistency.

• Attribute-Driven Functionality: The system relies entirely on custom attributes rather than complex code. The primary attribute fc-video-popup controls the logic, accepting values such as component to define the overlay, open for triggers, and close for dismissal buttons or background overlays.
• Seamless Playback Automation: The solution improves User Experience (UX) by ensuring videos automatically play when the popup opens and pause when closed. This requires no manual interaction from the user other than clicking the trigger, and includes a custom "play" button integration for resuming paused content.
• Scalable Component Architecture: Users can transform the popup into a Webflow Component with custom properties. Crucially, you must create properties for the video link, thumbnail, and script visibility to allow unique content for different instances while maintaining a single master design.
• Conflict-Free Multi-Instance Logic: When using multiple popups on a single page, you must assign unique identifiers (e.g., component-2) and remove or hide duplicate script elements. The tutorial emphasizes keeping only the last script instance active to define variables correctly without generating conflicts.
• CMS Integration Strategy: The popup is designed for dynamic content. To link it to the CMS, users must bind the component's properties to plain text fields (for the video URL) and image fields (for thumbnails) within the CMS Collection, rather than using standard link fields.

• 03:00 - Assigning the fc-video-popup attribute with a value of component to the overlay element to define it as the main component.
• 05:27 - Adding the fc-video-popup attribute with a value of close to the background overlay div to enable closing by clicking outside the video.
• 07:20 - applying the fc-video-popup attribute with a value of close to the text link button to create a specific "Close Popup" trigger.
• 08:53 - Changing the element settings tag property to iframe to convert a standard Webflow custom element into an iframe.
• 09:07 - Setting the SRC attribute on the iframe element to the specific Vimeo embed URL to define the video source.
• 11:52 - Assigning the fc-video-popup attribute with a value of play to the custom play button to enable resuming the video after it is paused.
• 12:43 - Configuring the trigger button by adding the fc-video-popup attribute with a value of open to the link element.
• 15:46 - Changing the attribute value to component-2 on a duplicated popup overlay to distinguish a second instance on the same page.
• 18:15 - Deleting the popup script element from the first instance when multiple popups exist, keeping only the script in the last instance to avoid conflicts.
• 19:32 - Converting the custom element structure into a reusable Webflow Component using the shortcut Command/Control + Shift + A.
• 20:15 - Creating and connecting a new Component Property called component name to dynamically change the attribute value for different instances.
• 21:21 - Creating a video link property and binding it to the iframe's SRC attribute to allow unique videos per component instance.
• 22:18 - Creating a script visibility property connected to the script element's visibility settings to manage code execution across instances.
• 23:43 - Setting the script visibility property to Hidden on the first component instance to prevent duplicate variable definitions.
• 25:40 - Binding the component's video link property to a specific CMS plain text field to populate content dynamically from a collection.

Technical Guide: Advanced Custom Video Popups in Webflow

This tutorial outlines the architecture of a custom video popup system that utilizes specific attributes to manage auto-play, pause-on-close logic, and CMS integration without writing complex custom JavaScript manually.

Step 1: Define the Popup Component Scope

Timestamp Reference: 03:00

• How: Select the main popup overlay element (the parent wrapper that covers the screen). In the Element Settings panel, add a custom attribute:

◦ Name: fc-video-popup

◦ Value: component

• Why: This attribute identifies the specific element as the "master" component in the code. It acts as the root for all interactions, ensuring the script knows which overlay to target.

Step 2: Configure Animation Settings (Optional)

Timestamp Reference: 03:21 – 04:28

• How: With the popup overlay selected, add two additional attributes:

◦ easing: Input a value like ease, ease-in, or a custom cubic-bezier curve (referencing MDN Web Docs).

◦ duration: Input a numeric value (e.g., 300).

• Why: While not required (defaults are provided), these attributes allow you to customize the physics of the fade-in/fade-out animations directly from the designer without touching CSS.

Step 3: Implement "Click-to-Close" Logic

Timestamp Reference: 05:27 (Overlay) & 07:20 (Button)

• How:

1. Select the Background Overlay div (the element sitting behind the video). Add the attribute fc-video-popup="close".
2. Select the text/icon element acting as your Close Button. Add the same attribute fc-video-popup="close".

• Why: This improves User Experience (UX) by allowing users to dismiss the popup (and immediately pause the video) by either clicking a specific button or simply clicking the empty background space.

Step 4: Construct the Video Iframe

Timestamp Reference: 08:53 – 09:07

• How: Select your Webflow custom element intended for the video.

1. In Element Settings, change the Tag to iframe.
2. Add the src attribute. Paste your Vimeo embed URL as the value (ensure you use the embed link found in the Vimeo share options, stopping before the query parameters).

• Why: Converting a custom element to an iframe tag is necessary to render external video content. Using the specific Vimeo embed link ensures the script can control playback (auto-play/pause) correctly.

Step 5: Enable "Resume Play" Functionality

Timestamp Reference: 11:52

• How: Select the custom Play Button element inside the popup design. Add the attribute fc-video-popup="play".
• Why: If the video is paused while the popup is open, this custom button allows the user to resume playback seamlessly, keeping the UI consistent with the rest of the design.

Step 6: Connect the Trigger Button

Timestamp Reference: 12:43

• How: Select the link block or button on your page that should launch the video. Add the attribute fc-video-popup="open".
• Why: This attribute binds the button to the component, executing the "Open" animation and triggering the video to auto-play immediately upon click.

Step 7: Assign Multiple Triggers (Optional)

Timestamp Reference: 14:16

• How: Select any other button on the page (e.g., a "Watch Trailer" button lower down). Add the exact same attribute: fc-video-popup="open".
• Why: You can have unlimited trigger buttons for a single popup instance. The script listens for this attribute globally to trigger the associated component.

Step 8: Manage Multiple Popup Instances

Timestamp Reference: 15:46 – 18:15

• How:

1. Duplicate the popup overlay. On the second instance, change the attribute value to fc-video-popup="component-2". Update its trigger button to fc-video-popup="open-2" (implied logic based on component naming).
2. Critical: Expand the first popup instance and delete the popup script element inside it. Keep the script only in the final instance on the page.

• Why: Having duplicate scripts creating the same variables causes code conflicts. Only one instance of the script is required to manage the logic for all popups on the page.

Step 9: Convert to Webflow Component

Timestamp Reference: 19:32 – 20:15

• How: Select the popup overlay and press Cmd+Shift+A (or right-click > Create Component).

1. Go to the Component Properties panel.
2. Create a new property called "Component Name".
3. Bind this property to the fc-video-popup attribute value.

• Why: This allows you to use the same master design multiple times while dynamically assigning unique IDs (e.g., component, component-2) for each instance via the properties panel.

Step 10: Create Dynamic Content Properties

Timestamp Reference: 21:21 – 22:18

• How: Inside the Component edit mode:

1. Select the iframe, click the purple dot next to the src attribute, and create a property called "Video Link".
2. Select the script element, go to Visibility, click the purple dot, and create a property called "Script Visibility".

• Why:

◦ Video Link: Allows every instance to play a different video.

◦ Script Visibility: Allows you to set the script to "Hidden" on all instances except the last one, preventing the code conflicts mentioned in Step 8 without deleting elements.

Step 11: Integrate with CMS Collections

Timestamp Reference: 24:31 – 25:40

• How:

1. In your CMS Collection, create a Plain Text field (not a Link field) for the video URL.
2. On your Collection Page (template), drag in the component.
3. Bind the "Video Link" component property to the Plain Text field from the CMS.

• Why: Webflow's standard "Link" field does not play nicely with iframe src attributes in this context. Using a Plain Text field passes the raw URL string directly into the component, ensuring dynamic population of videos across template pages.

Create a custom overlay element with the attribute fc-video-popup="component" and embed your video using an iframe element. Link a trigger button using the attribute fc-video-popup="open", which automatically starts playback when clicked and pauses the video when the popup is closed.

Apply the attribute fc-video-popup="close" to the background overlay div sitting behind the video wrapper. This configuration instructs the system to dismiss the popup and immediately pause the video content whenever a user clicks outside the main video frame.

Assign unique attribute values to each popup instance (e.g., component, component-2) and their corresponding triggers to distinguish them. Crucially, remove the custom script element from all instances except the last one on the page to avoid code conflicts while ensuring all popups function correctly.

Convert your popup into a Webflow Component and create a custom property connected to the iframe's SRC attribute. Bind this property to a CMS "Plain Text" field containing the video URL, as standard CMS link fields are incompatible with this specific attribute-based implementation.