Streaming live at 10am (PST)

Dynamic Video Lightbox!

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!

samliew

1m

Hello, I’m also unsure what you mean about modifying step 3. Would it be possible to clarify? I would need to play both youtube and vimeo videos. Any input is appreciated. Thanks!

Hey there,

I would give this a shot. It works like a charm for me, and it has been suggested as a better option than the one you’re currently working though. I was stuck in the same spot you are, but when I switched to this method it solved everything. Hope it works out for you too! https://webflow.com/website/CMS-LightBox-Galleries-The-Easy-Way

@Caleb_Williamson thanks for the response. I’ve tried this one, its been able to work. I can definitely us it but is there any to have it not open a new page/tab when you click the video? It would be nice to have users stay on the page while checking out multiple videos instead of have to close the page that was open and need go back to see the others. Thanks again for your help!

@Pixel_Pleaser Make sure your link block with class name video does not have the “Open in new tab” checkbox checked. If that’s not the problem, then I’ll have to do some more research into this.

Brilliant! Thanks, that did it! I appreciate it!

@Pixel_Pleaser No problem! Good to hear!

1 Like

To autplay a youtube video, simply add autoplay=1 to the embedly src string.
ie.

<a class="w-inline-block w-lightbox" href="#">
  <img src="[COLLECTION-IMAGE]">
  <script class="w-json" type="application/json" 
          data-src="[COLLECTION-VIDEO-URL]" 
          data-img="[COLLECTION-IMAGE]">{ "items": [{
    "type": "video",
    "url": "[COLLECTION-VIDEO-URL]",
    "html": "<iframe class=\"embedly-embed\" src=\"//cdn.embedly.com/widgets/media.html?autoplay=1&src=https://www.youtube.com/embed/{YOUTUBE}?feature=oembed&url={SRC}&image={IMG}&key=c4e54deccf4d4ec997a64902e9a30300&type=text%2Fhtml&schema=youtube\" width=\"940\" height=\"528\" scrolling=\"no\" frameborder=\"0\" allowfullscreen></iframe>",
    "thumbnailUrl": "[COLLECTION-IMAGE]",
    "width": 940,
    "height": 528
  }] }</script>
</a>
1 Like