EN IT
Home About Learn Blog

Add YouTube to Your Custom Video Popup in Webflow

Intermediate 5:21 webflowyoutubevideopopupembed

Update your custom Webflow video popup to play YouTube videos too — grab the right embed URL, enable the JS API, and even recolor the play icon.

Watch on YouTube

Key takeaways

  • This is a drop-in upgrade — the popup you already built needs zero changes, because the same video link property now accepts YouTube as well as Vimeo.
  • You can't paste a normal YouTube link: the address bar and the Share > Copy button both give a watch link, so you have to pull the real embed URL from Share > Embed.
  • From the embed snippet you keep only the part from https up to the question mark — that trimmed URL is what the video link property expects.
  • Adding ?enablejsapi=1 to the embed URL is what lets the popup control the player with code, so the video autoplays on open and stops on close.
  • A new play-icon color property takes any CSS color — a keyword, a hex value, or rgb() — defaulting to white, so the trigger can match your brand.

Video chapters

  1. 00:00 Intro
  2. 00:59 How to embed a YouTube video
  3. 02:07 How to get the right link to embed the YouTube video
  4. 03:45 How to change the color of the Play icon
  5. 04:48 Outro

Your custom video popup can now play YouTube videos, not just Vimeo — and switching is almost effortless. This is a small update to the custom video popup we built together: same component, same configuration, just one new trick for grabbing the right YouTube URL. If you haven’t done the original build yet, start there and then come back here.

The one catch with YouTube is that you can’t simply copy the link from the address bar or the Share button — you need the proper embed URL, plus one tiny query parameter that lets our code control the player. Get that right and everything behaves exactly like the Vimeo version: it opens, plays, and pauses when you close it.

As a bonus, there’s a brand-new property for recoloring the play icon on the trigger, so it can match whatever palette your page is running.

How it works

Nothing about the popup itself changes. The component still reads the same video link property you configured last time — the only difference is what you feed it. For Vimeo you pasted a Vimeo URL; for YouTube you paste a YouTube embed URL. Same field, same component, and both can happily live on the same page (one popup on Vimeo, another on YouTube) with no conflict.

The reason a normal YouTube link doesn’t work is that it’s a watch link, meant for the browser, not for an iframe. YouTube’s real embed URL lives behind Share > Embed — and even there you don’t want the whole thing. You copy only the src, the part that runs from https up to the question mark, and drop that into the video link property.

One more piece makes the magic work: ?enablejsapi=1 appended to that URL. This switches on YouTube’s IFrame (JavaScript) API, which is what lets the popup’s code play and pause the video programmatically — so it autoplays when the popup opens and stops when it closes, exactly like the Vimeo behavior. Skip that parameter and the video will still load, but the popup loses that control.

The other new addition is a play-icon color property. It accepts any CSS color format — a keyword like white (the default), a hex value like #111, or an rgb() value — so the play button on your trigger can match your brand instead of always being white.

How to use it

  1. Start from the existing build. This update assumes the custom video popup component is already on your page. If it isn’t, build the original first — you can clone the whole project below.

  2. Grab the YouTube embed URL. Open the YouTube video, click Share, then click Embed (not Copy). In the embed code, copy only the src value — the part from https up to the question mark.

  3. Enable the JS API. Paste that URL into the same video link property on your popup, then add ?enablejsapi=1 to the end so the popup can control playback.

  4. Publish and test. Open the live link and trigger the popup — the YouTube video plays, and closing it stops the video. Any Vimeo popups on the page keep working unchanged.

  5. Recolor the play icon (optional). Set the play-icon color property to any CSS color — a keyword, a hex like #111, or an rgb() value — then republish to see the trigger icon update.

Resources

Frequently asked questions

Why can't I paste a normal YouTube link into my Webflow video popup?
The link from the address bar or the Share > Copy button is a watch link, not an embed link, so the player never loads inside the popup. Open the video, click Share, then Embed, and copy the src that runs from https up to the question mark.
What does enablejsapi=1 do in a YouTube embed URL?
It turns on YouTube's JavaScript (IFrame) API, which lets code start and pause the player. The popup relies on that to autoplay when it opens and stop when it closes, so add ?enablejsapi=1 to the end of your embed URL.
Can the same Webflow popup component use both Vimeo and YouTube videos?
Yes. One popup can hold a Vimeo video and another a YouTube video on the very same page — you switch either one just by changing its video link, and nothing else in the setup changes.
How do I change the color of the play icon on the popup trigger?
Set the play-icon color property to any CSS color: a keyword like white (the default), a hex value like #111, or an rgb() value. Republish and the trigger icon picks up the new color.

← Back to the course

Also part of these courses