Trigger Video in Different Div with Dynamic Data

Hey guys,

I am currently using a popup/lightbox modul to display the videos on our creatives page, but we had a change of heart. Instead, I would like to see if it is possible to create a feature where I click the thumbnail for the project, and it triggers a video to start playing over the div that contains the header image+director’s name.

I would think that using Webflow’s trigger function would work well, but I’m not sure how to get it to work with all the Dynamic Data content.

I’ve attached two pictures of our site to help illustrate what I am trying to achieve:


Here’s an example of another site that is using a fairly similar feature: Prettybirdus

Thank you in advance!


READ ONLY LINK

Hi, @carlsson!

In the example that you showed, they have a separate page for every video, which can be easily done by using CMS (dynamic content). But from what you explain, it seems you want to have a custom lightbox, with the functionality of generic Webflow lightbox widget (switch between videos inside the opened lightbox). Unfortunately, it is not possible now.

You can create custom lightbox, but you will be not able to add other thumbnails there and switch between videos.

Regards,
Anna

Hi @sabanna, and thanks for helping out again!

I played around with it a little bit before, and one idea I had was to put a “modul” that opens when you click the thumbnails at the bottom. It looked fine, but I just couldn’t get the positioning to work.

The issue is that the custom lightbox/modul is obviously INSIDE the dynamic item div, so I can’t really use absolute positioning to place it at the top, and if I use fixed positioning, it moves as the user scrolls… so basically, my question: is there a way to fix the custom lightbox/modul to the top, but not have it move when the user scrolls?

Actually, fixed positioning should not allow element moving when user scrolls. Unless fixed element is bigger than screen size :confused:

@sabanna That’s what I thought as well.

Here’s the read only of the test I did. If you navigate to the Directors Template under Collection Templates, and pick Jonathan Lia’s page, for example. You’ll see what I mean with the scroll. Is there a way around this?

I see that all the time in webflow. It often happens when I make menus that work like a mobile menu. A div that covers the whole page, but when you scroll, you “remove” the fixet section/div.

Maybe a bug?

Hello again, @carlsson

I can’t understand the structure on that page. You have a “Modal video” and “Lightbox - modal”. I see that by clicking on the thumbnail there will be open Lightbox-modal. Then what the purpose of “Modal video”?

Btw, all elements are acting correct, exactly how they suppose to.

@sabanna

Sorry, I should’ve clarified that the “Lightbox modal” was the custom lightbox that we do not want any longer.
IF I can get the “Modal Video” to work the way I want it to work, then I’ll be getting rid of the Lightbox Modal.

Is there a way to have the “Modal Video” fixed in one position at the top, even when you scroll?
This is how I want it to work:

This is how the scroll works now:

I hope this clarifies what I mean. I don’t want the “Modal Video” to cover the other thumbnails when you scroll.

Then you don’t have to use position: fixed, because what you get is exactly how fixed object works. They will NOT move while all page is scrolling. And you want that object (element) moves with page too.

For Modal-video you will have to use position: absolute instead. And remove position: relative from Work-item and Work-section, instead set position: relative to the videolink. With this settings, position of Modal-video will depend on the body position.

Then just change the interaction for open/close modal video and you will get what you expect

Regards,
Anna

1 Like

@sabanna – wow… looks like you’ve worked your magic again! Thank you so much, that works perfectly!

1 Like

While I have your attention… may I ask how I can get the video to display in the full height of the “Modal Video”? I can change the size of the video if I change its width. But nothing happens if I mess with the height of the video, or the container div of the video.

Ideally, I want it to be the same 550px as the Modal Video…

EDIT: Read only

Try VH measurements for height. :wink:

I’ve tried VH for height but it’s not working great for me.

  1. I don’t want the size to change depending on the size of the viewport, and
  2. It’s not showing any consistency. I’ve attached two pictures of how the video is different height on different pages


If you will look at the code of the page with video, you will see that there are IFRAMEs. I don’t think you will have much control on it. :confused:

Oh wow. There is no way to keep all the videos the same height?

I can’t find the way :frowning: I am sorry

Probably you will end up with using custom code.
Check this article: Fluid Width Video | CSS-Tricks - CSS-Tricks

Hey, @carlsson. I have an idea. What if you will try to use the different type of field for the video links. Right now it is “Video Link” type of field, try to use simple Link field. I can’t edit your collections through read-only link so can’t really check how it will work with video widget.

But it will for sure more usable for custom code.

1 Like

Hm, I am not really 100% sure of what you mean. However, somehow it is working pretty good right now. Most videos seem to be fitting in nicely in the modul, and even the videos with bigger letterboxes adjusts nicely.

However, there seem to be an issue of some modals not opening when another modal is already open. For some videos it works, for some it doesn’t. Also, clicking another thumbnail stops working when a video is playing. Is there a simple fix to this?

It is because modal for the “latest” item will always cover the modal for the previous item.

Same reason here.

I am gonna dig deeper and try to create correct interaction. But you will still have a problem with auto stop video when modal is closed. It will need custom code. Try to search forum, it seems I saw some topic about it.