Jump to content

Make a lightbox with CSS code only

Recommended Posts

Site URL: https://preludefilm.squarespace.com/?p

Hello everyone!
I'm new to post here but I've been using the forum a lot lately. It's been really handy when it comes to code.
Anyways, there's something that requires much more experience than I have and I keep failing whatever I tried.

On the front page of my (under contruction) website, there's a botton in the middle of the page saying "watch teaser". By clicking on it you are redirected to vimeo. I wish to open the video in a lightbox to stay on my website but couldn't find the appropriate CSS code. Does it exists to begin with?

Code to access my website is "youarewelcome".

Thanks for the help guys!

Edited by JordanUrgin
typo mistake
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Hi @JordanUrgin, I have a tutorial covering two ways to accomplish this - one free and one paid plugin. I recommend checking it out as it should answer your question!

Since gallery blocks are no longer available on 7.1 without a plugin, I recommend using the lightbox video plugin which I cover at 9:15 in the video: https://youtu.be/9OvjPYi5yvw?t=555

That will do exactly what you are looking for!

Link to comment

Hello Chris! Thank you for the tip and help, you're one of the first one I saw when I was trying to accomplish that but the thing is "code injection" requires at least a business membership and I have the membership right below sadly.
Si I'm still looking for some CSS coding, without code injection and Java, to create my lightbox. If it's possible but I think it is.

EDIT: After verification my membership "business" actually allows the code injection! Thank you Chris, I'll try your method!

Edited by JordanUrgin
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.