Ghost Plugins

View Original

Easy Video Lightbox (Preview)


Super Plugin Info

  • Works with Squarespace 7.0 (Brine) and 7.1

  • Requires Business Plan or Higher

  • Compatible with YouTube and Vimeo Videos

  • Uses CSS Editor and Code Injection


Step 1. Add this code to Header Code Injection

See this content in the original post

Step 2. Add this code to Footer Code Injection

See this content in the original post

Step 3. Add this code to Custom CSS

See this content in the original post

Step 4. Customizable Options

These options are available in Custom CSS.

  • Lightbox Width

  • Overlay Color

  • Overlay Opacity

  • Border Radius

  • Border Style

  • Close X Icon Color

  • Top Padding

  • Side Padding

  • Side Padding (Mobile)


Step 5. Add Your Videos (YouTube, Vimeo)

You can add the video lightbox to almost anything that allows you to add a link:

  • Navigation Links

  • Header Button

  • Button Blocks

  • Text Hyperlinks

  • Image Block Links

Create and add a link like normal and add # right before the video’s URL to the link box. The link should look something this: #https://www.youtube.com/12345

⚠️ Important: Be sure to use the video’s full URL that is shown in the browser and not the shortened shareable link that YouTube generates.


Plugin Notes

  • Only compatible with YouTube and Vimeo videos.


Troubleshooting (Plugin Not Working)

  • Use the video’s full url and not the shortened shareable link.

  • Check the video’s privacy settings to make sure it is publicly available.

  • Not compatible with videos uploaded to video blocks or galleries.