Workaround Video Lightbox Component

Finsweet Components
1

Description

Are there any plans (or is there a current workaround) to create a component so whilst someone is in Marketer role they can edit media in a video lightbox?

Currently, you can’t change the video in Marketer role using the native Webflow Lighbox as there’s no ability to add a property for the media.

2

Hey @consultingcreatively!

There’s no dedicated Finsweet lightbox component right now, so this is largely a Webflow-native limitation — the native Lightbox element doesn’t expose the media/video URL as an editable property in the Marketer role.

Before we can point you in the right direction, a few quick questions :folded_hands:

  • What element are you using for the lightbox? (Webflow native, custom-coded, or something else?)
  • What’s the video source — YouTube, Vimeo, or self-hosted?
  • Are these videos tied to CMS items, or are they static/hardcoded?

The reason we ask: if your videos are (or could be) stored in a Webflow CMS collection with a video URL field, that opens up a path where Marketers update the video URL through the CMS editor rather than through the Lightbox element itself. We can’t confirm that as a clean solution without knowing your exact setup, but it’s worth exploring.

One thing worth flagging — if your use case involves a YouTube video feed displayed in a lightbox, Finsweet’s YouTube Feed component does include lightbox video playback as a built-in feature. Depending on what you’re building, that could be relevant.

On the roadmap side, we don’t want to speculate on what’s planned, so we’ll loop in @Support-Luis or @Support-Pedro — they’ll be better placed to speak to whether something like this is on the radar.

If you can share your Webflow staging URL or a read-only project link, that’ll help a lot in pointing you toward the best path forward.

3

In response to your questions:

  • I’m using Relume components, Header 75 in this case so the lightbox is Webflow native.
  • YouTube will be the video source
  • There’s no CMS on the site, they are static

Here’s the read-only link with Relume Header 75 converted to a Webflow component: Webflow - Grant Searchlight

What would be the steps if a CMS was added to the site?

4

Hey @consultingcreatively

To store Youtube videos in a collection
Create a collection named Videos for instance, add in the fields Name, YouTube Url, & any other relevant field you might need e.g. Description. The Name is the Video title

On the page, add a Collection List & connect it to the Videos collection

Inside each Collection Item add in an Webflow Embed element & paste in the code

<iframe class="yt-video" width="100%"  height="315" frameborder="0" allowfullscreen>
</iframe>

<div class="youtube-url" style="display:none;"></div>

Then add this code at the Before </body> section

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".youtube-url").forEach(function (el) {
    const url = el.textContent.trim();
    const videoId = getYouTubeID(url);

    if (videoId) {
      const iframe = el.previousElementSibling;
      iframe.src = "https://www.youtube.com/embed/" + videoId;
    }
  });

  function getYouTubeID(url) {
    const regExp = /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([^&\n?#]+)/;
    const match = url.match(regExp);
    return match ? match[1] : null;
  }
});
</script>

The video urls added to the Videos collection should show up as embeds on the youtube page

Hope it works out alright as we are getting out of FS support scope
Thanks