Streaming live at 10am (PST)

Dynamic Video Lightbox!


#4

Next time you should bounce ideas off me first.

What do you mean?

I didn’t style them at all. It’s just dynamic list column selection + a single lightbox inside.

I updated share link on my post above.


Also, feel free to contact me for further code help and/or customization of third-party plugins


#5

You know how there's an option to link light boxes in the lightbox settings so that the thumbnails for the other ones show up in the bottom of the lightbox below? I was curious if there might be a way to do that.

So how do you style the entire list so it looks good? And how do you add the title below and tweak everything so it looks right?

EDIT: I figured out how to style it. Just add the class of your pre-styled elements to the lightbox outer div and the inner image if desired.


#6

Oh that would be just another setting, can be done easily. Did you see my flickrsearch project above? I linked dynamic content together in the same lightbox.


split this topic #7

5 posts were split to a new topic: Dynamic Video Lightbox Help (1)


#11

Does this code work even if the embedded video is not from Youtube or Vimeo?


split this topic #12

A post was split to a new topic: Lightbox to display content instead of images/video?


#13

Hello! I got everything working fine. However, I couldn't figure out how to stylize the thumbnails. Would it be possible to show on hover something like this?


#14

I think I managed to do it!

(it still needs some stylization)

I just made an interaction with the HTML embed to get the opacity to 0% on hover revealing what's behind it. Initial appearance is 100%, hover is 0%, hover out is 100%.

Behind I put the layout I wanted using the same size as the thumbnail.

However, the HTML embed will still be clickable even though is not visible since I put a higher z-index to it, so whenever they click on the layout, it's going to open the video lightbox and such!

This is all using CMS :smiley:

I just give numbers to my portfolio items and then I can set a filter to each of the dynamic lists to "number equals x" and limit to 1 item.

The downside to this is that I cant really put any interactions to the layout behind the thumbnail. Would love to make the play button pulse.
The only way to make it interact on hover is making the HTML embed completely disappear, but then you wouldnt be able to open the video lightbox.

Please, let me know If there's a most effective way to do this, I'd love to know!

and thank you for all your amazing help so far :slight_smile:


#15

@samliew Do you know why I’d be seeing double the videos in the lightbox group when the lightbox is full screen? The first 7 videos don’t work, but the last 7 do. Your help is much appreciated!

Page is /resources-and-support

Read only: https://preview.webflow.com/preview/naturalplaygrounds?preview=417dd3835fc935b54715ed5ceffb562e

Link: http://naturalplaygrounds.webflow.io/resources-and-support#videos


#16

Hi, samliew! Does it possible to switch to smaller images for mobile versions in the same lightbox? Using, say, some media queries?


#17

Hey all. This question is particularly for @samliew, @sabanna, and @Waldo.

I’ve used the method in this forum to successfully close the video on the main page of a website. But, I have another page with a collection of lightboxes. The code seems to break down because when you click on a thumbnail, instead of popping up the correct video, it pops up the video of the first thumbnail, no matter which thumbnail you click. I suspect it’s because it’s finding the first time the class is found in the html. Is there way to have this code reference the actual video that’s clicked?

Here’s my webflow preview URL

https://preview.webflow.com/preview/makebeautiful?preview=0b9aa31b242c1e85847b67d107dcd50d

Thanks in advance for your help!


#18

Hey @samliew, @sabanna, and @Waldo. Just checking in to see if one of you could take a look at my previous post?

Thanks!
Jose


#19

This is terrific! Thanks for posting such a detailed reply.


#20

Hi! @DFink @jocando

Thank you very much for your post. I’m trying to make it work and actually im close to it but still missing something…when i click any of my videos the modal will show the first video always…any thougts?.

thank you!


#21

Hi Sam!

Thank you for your post. Im trying to make it work but it seems the video URL doesn´t show correctly. You tube says that there was an error … any thoughts?

thank you


#22

Hey @Dave01

I had a friend write some custom javascript for me that did the trick. The code is below. He mentioned the following:

The main thing to be mindful of when targeting CSS classes with Javascript is that there may (or in this case will) be several instances of that class on the page, and for this particular task, finding a way to target specific elements is essential.

In this case, I chose to use the event object (see: “…click(function(e)…”) to help pinpoint the exact modal containing the video being played. From there, we can find/target the specific “.work-collection-item”, which in turn allows us to find the specific iframe.

<script>
$(document).ready(function() {
    // listen to when background or "x" has been clicked
    $('.modalbackground, .modalbackground .white-close-button').click(function(e) {
        var t = $(e.target); // close target
        var c = t.closest('.work-collection-item'); // container 
        var v = c.find('.w-video iframe').attr('src'); // video source
        
        // remove src
        c.find('.w-video iframe').attr('src', '');
        
        // add src back
        c.find('.w-video iframe').attr('src', v);
    });
});
</script>

#23

Yeeha! thank you @jocando! i will try :smiley:

Really appreciate you quick response.


#24

This is great thanks! Question… how can I get autoplay to work?
When I add “?autoplay=1” to the youtube link it cause the video now to work. I tried adding “allow=“autoplay; encrypted-media”” but that didn’t work either. Not sure what to do. Whenever I added ?autoplay=1 to a video in the lightbox video element (without CMS, just regular) it works no problem. Curious if I am missing anything.


#25

@samliew I’m having the same issue as @Noah-R, haven’t been able to fix it. Whenever I add “&autoplay=1” or “?rel=0” to the dynamic video link, it breaks the Youtube link and returns an error. It only works with the generic Youtube links. Any idea how to fix this? Thanks in advance!


#26

@samliew Where can I find how to format for a Vimeo video? Also, I am getting an error that “…webflowLightBox is not a function”. Is this different since the post has been made?

EDIT: I found the format for a Vimeo video by adding a light box with one and looking at that element in the console. Then just replaced the video url and id through the embed element “add field” option. It worked well.

As far as the webflowLightBox() is not a function. The work around here was to add a empty lightbox to the page and keep it hidden. This activates the embedded LightBox allowing it to open which im guessing the webflowLightBox function was meant to do.