Dynamic Video Lightbox!

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.

@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!

@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.

@samliew is there any update to get autoplay to work with the lightbox video using the code here?

Does this work better than Samliew’s below?

I tried his method but it won’t pull the youtube video…

Open to try if it works!

Here is our read-only: https://preview.webflow.com/preview/cho-site?utm_source=cho-site&preview=26a844c60434da1b64c4aeff3fdef3e3

Tried to message Samliew on his method, but he said he doesn’t do consultation!

I’d love a method that works!!

All help appreciated.

Samliew…

This doesn’t work anymore…

Unsure what’s happened, but you can view my read-only: https://preview.webflow.com/preview/cho-site?utm_source=cho-site&preview=26a844c60434da1b64c4aeff3fdef3e3

In your tutorial you don’t mention that you have to make sure your collection item for the ‘youtube’ video link is a ‘plain-text-field’, and even when we do that and your specific ‘youtube’ url link, it doesn’t work.

Also, you must paste a ‘lightbox’ modal on a seperate page for the lightbox action to work.

Missing some key important things, would love to know what I’m doing wrong so this can help others!

Thanks!

@jocando @Ilan_Golan @Alejandro_Hernandez @Ade_Adegoke @DFink @Dave01 @jordanshotwell @teeej @c062785

Here is your answer! A way less complicated way to achieve lightbox with CMS collections. I’m telling you, you can understand this. Literally just a few lines of custom code only. PLUS it doesn’t get in the way and limit design features in Webflow.

Check it out!!
https://cms-lightbox-galleries.webflow.io/

1 Like

Thank you,

I’m going to try it!

1 Like

You bet! :slight_smile: I think you’ll be blown away by how easy it is!

1 Like

J_Canan is amazing!

This works, it’s clean, beautiful!

Thank you!!!

This should be highlighted as the only pop up you need, everything else is way too complex and ugly!

Use this!!!

1 Like

Glad you like it man! Thanks! :call_me_hand:t3:

Thank you , it also helped me,
I’m doing a website, and on its first page, the client wants to have around 12 videos. I had to create a custom lightbox like this, because the webflow standard lightbox doesn’t work for iphone X…

So I used your scripts. But as I am not a developer, I simply copy pasted that script, for the 12 different videos…
Because it used to make only one video work…

All videos work like this… .But the script is huge, and the page takes time to load. I don’t really know how to change this.

How could I shorten the script, and make all the videos work??

Cat,

Are you using CMS? I did this for my friend who has about 20 videos on one page. If you use CMS with this plug in, it should work ok! Hope that helps…?

Here’s the link to the webflow page I did for him if you want to check it out:

http://cho-site.webflow.io

Hey,
I found that plugin , it seems like it would fix my issue

Although, I’m really not sure how to implement it on the project. Or in the cms… How did you do it?

thanks for your reply

Can you supply me with your read only?

I just cloned the project and followed their guide…

You paste the code in the needed sections.

Then in your CMS make sure to have the video ‘url’ of what you’d like to pop up when the thumbnail is clicked.

That should do it!

I’m not sure how to do this. I need the embed to play Vimeo videos but don’t know what you mean by modifying Step 3. I would appreciate your help!

Hello @jocando! Can you share which pieces of the code need to be changed to match the class structure of my personal site? It doesn’t seem to be working. Thank you!

Hey Caleb! Two things:

  • The pieced of code you need to change are whichever targets get clicked to close the modal. In my code, it’s modalbackground and .white-close-button.
  • I have since switched to using @Noah-R’s solution linked above (CMS Lightbox Galleries). It’s easy to implement and is compatible with the CMS. Highly recommend!
2 Likes

@Noah-R Thank you so much! It works perfectly. My only question is how can I add elements that overlay the lightbox? For example a Contact Us button floating to the side of the video. I tried using the z-index of a button positioned absolutely, but that doesn’t work. Thanks in advance!