Lightbox for Vimeo or Youtube link

Hello,

Is there anyone out there that can show me how use a good lightbox widget for Vimeo?
I would like something like this… WordPress Plugins by Themeisle

I appriciate your help

1 Like

Hi Daniel! Ok, here is the instruction:

  1. Download the files for the lightbox plugin
  2. Copy these files to a server or cdn that you have access to. You will need a url to each of the files that you copy to the custom code section of the site settings.

Tip: If you need a good cdn to host your own files, you can get free 5 GB from Amazon S3 for 12 months, OR you can get a good deal from RackSpace. I use rackspace, which costs 10 cents per 1 gb of data storage per month… so it is dirt cheap, and the performance is 40gbps with good performance… really up to you if you get your own cdn usage going, but for webflow, I recommend it, I put all my js code for plugins on my own cdn hosting…

  1. copy the following to the “Add code to head tag” section in site settings:

**note: remember to change the path to the css files, to the url for the file you copied to your server or CDN

  1. Copy the following code to the “Add code before body tag” panel in the custom code section of site settings:

**note: Like with the path to your css files, make sure you put the url to where the nivo-lightbox.min.js file is stored

Then save and publish your site. The nivo lightbox plugin will automatically detect the type of content you are trying to show in the lightbox. In the example above, the lightbox will show the linked content, and per Nivo:

“The Nivo Lightbox automatically detects the type of content you are trying to show and loads it correctly. No extra setup required. So no matter if you are trying to show images, image galleries, AJAX, Flash, Youtube or Vimeo videos, another website or just inline HTML”

Hope that helps, ask if questions and happy designing ! Cheerios :smile:

4 Likes

Hi @cyberdave

Could you please help me with this. I did as you wrote, it was working and now stopped working :frowning:

https://webflow.com/design/visus?preview=50050015e13314cd644d0bd4c4ecf49d

@cyberdave nvm fixed it. thank you :smile:

1 Like