How to Build a Custom Video Popup in Webflow (Update)

This tutorial serves as a critical expansion to SupaSaito’s custom video popup solution for Webflow, upgrading the existing framework to support a hybrid environment of both Vimeo and YouTube content. The core value lies in the ability to utilize a single, reusable component that seamlessly switches between video hosting platforms without requiring complex reconfiguration or separate structural setups. This ensures developers can maintain a clean project architecture while offering flexibility in content sourcing.

The instruction focuses heavily on the technical nuances required to properly integrate YouTube within this custom build. It guides the viewer away from using standard share links, demonstrating instead how to extract the specific embed source URL required for the component to function. Furthermore, the video emphasizes the necessity of appending the enablejsapi=1 parameter to the URL, a crucial step that enables the JavaScript code to control video playback programmatically, ensuring the user experience remains consistent regardless of the platform used.

Finally, the session introduces an aesthetic enhancement to the component, allowing for greater design consistency through a new property dedicated to the play icon's color. Viewers will learn how to customize this element using standard color names, hexadecimal codes, or RGB values. By the conclusion of the video, the viewer will have a robust, "clonable" Webflow component that is both functionally versatile and visually adaptable.

• Expanded Platform Compatibility: The custom popup solution has been updated to support YouTube videos, allowing the same component instance to host either Vimeo or YouTube content by simply updating the video link property.
• Specific Embed URL Extraction: Users cannot utilize the standard URL found in the browser bar or the main share button; instead, the correct link must be extracted from the "Embed" code snippet, copying only the string from "https" to the question mark.
• JavaScript API Activation: To ensure the solution can play and pause videos programmatically via code, developers must manually append the parameter enablejsapi=1 to the end of the pasted YouTube link.
• Play Icon Customization: The updated component features a new property that allows developers to change the color of the play button using text names (e.g., "white"), hexadecimal codes, or RGB values to match the site's branding.
• Seamless Integration: These powerful functional upgrades require absolutely no changes to the configuration of the previous solution, ensuring a frictionless transition for those already using the original Vimeo-based popup.

• 01:54 – Select the specific instance of the popup component within the Webflow project to access its properties.
• 02:27 – Click the "Share" button on the target YouTube video interface.
• 02:29 – Select the "Embed" button to reveal the iframe code snippet.
• 02:43 – Copy only the specific URL string from the embed code, starting from "https" and ending at the question mark.
• 02:55 – Paste the extracted string into the video link property field of the component.
• 03:10 – Manually type enablejsapi=1 at the end of the pasted URL to activate the JavaScript API for programmatic control.
• 03:54 – input a standard color name (e.g., "white") into the play button property to change the icon's color.
• 04:02 – Input a hexadecimal value (e.g., #111) to assign a custom specific color to the play icon.
• 04:24 – Input an RGB value (e.g., rgb(123, 45, 78)) into the property field for advanced color customization.

Tutorial: Implementing Hybrid YouTube Support in Custom Webflow Popups

This guide outlines the technical steps required to upgrade the standard Vimeo-only popup component to support YouTube videos. This implementation utilizes a specific embed string and API parameter to ensure seamless playback control.

Step 1: Select the Component Instance

Timestamp: 01:54How: Navigate to your Webflow project canvas and select the specific instance of the popup component where you want to display the YouTube video.Why: This allows you to update the content source for a specific popup (switching from Vimeo to YouTube) while keeping the underlying component structure intact.

Step 2: Access the YouTube Embed Code

Timestamp: 02:08 – 02:29How: Open the target video on YouTube. Click the Share button located under the video player, then select the Embed button.Why: You cannot use the standard URL found in the browser address bar or the standard "Copy Link" button. The component specifically requires the raw source path found only within the iframe embed code.

Step 3: Extract the Specific Source URL

Timestamp: 02:43 – 02:51How: Highlight and copy only the URL string inside the code snippet. Start copying from https and stop exactly at the question mark (?).Why: The component expects a clean URL path. Copying the full iframe tag, quotation marks, or existing parameters will break the integration.

Step 4: Configure the Link and Enable the JavaScript API

Timestamp: 02:55 – 03:19How: Paste the extracted URL into the component's video link property field. Immediately at the end of the pasted URL, type the following text: enablejsapi=1.Why: This parameter is critical. It activates the YouTube JavaScript API, allowing the custom code to programmatically play and pause the video (e.g., stopping audio when the user closes the popup).

Step 5: Customize the Play Icon Color (Optional)

Timestamp: 03:45 – 04:47How: Locate the Play Icon color property on the component instance. You may input color values in three formats:

• Color Name: Type a standard name like white.
• Hex Code: Type a hexadecimal value like #111.
• RGB: Type an RGB value like rgb(123, 45, 78). Why: This allows the component's UI to adapt to different branding requirements without needing to modify the CSS classes manually.

To adapt a popup component for YouTube, replace the video link property with the specific embed source URL from the YouTube video. You must then manually append enablejsapi=1 to the end of this link to allow the JavaScript API to control playback programmatically.

Do not use the standard link found in the browser bar or the main share button; instead, click "Share" and then "Embed" to reveal the code snippet. Copy only the specific URL string found within the code, starting from "https" and ending at the question mark.

To ensure your solution can play and pause videos via code, you must activate the API by modifying the source URL. simply type the parameter enablejsapi=1 directly at the end of the YouTube link you pasted into your component's property field.

You can change the play icon's appearance by inputting a specific color value into the component's designated property field. This input supports standard text names (e.g., "white"), hexadecimal codes, and RGB values for precise design matching.