rambocookie Posted September 9, 2020 Share Posted September 9, 2020 Hi I am in need of a Video Carousel gallery. How can this be done in 7.1? Please help. Link to comment
tuanphan Posted September 10, 2020 Share Posted September 10, 2020 (edited) You can use these free tools to add Video Carousel gallery. Vimeo Gallery Youtube Gallery or Slider or paid plugin. Edited September 15, 2021 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
jeffbnz Posted November 11, 2020 Share Posted November 11, 2020 so new we need to use outside widget, and pay for it for something that has been in squarespace for ages?? I don't get it. Link to comment
Foxhandybread Posted November 4, 2021 Share Posted November 4, 2021 Neither the Vimeo or Youtube gallery are free. Seriously, this is not something that you can do any more without paying extra? Squarespace really does suck these days, huh Imanib 1 Link to comment
tuanphan Posted November 7, 2021 Share Posted November 7, 2021 You can also use Code Block to achieve this. However you will need to edit everything inside Code Block. If you still want it, I will check some code & give you. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
roxner Posted April 27, 2022 Share Posted April 27, 2022 On 11/7/2021 at 4:27 AM, tuanphan said: You can also use Code Block to achieve this. However you will need to edit everything inside Code Block. If you still want it, I will check some code & give you. I'd be interested in editing code block for a proper video carousel. Any option other than just stacking videos would be helpful. Preferably a slider arrow option or the codepen Netflix version: https://codepen.io/joshhunt/pen/LVQZRa Link to comment
tuanphan Posted May 5, 2022 Share Posted May 5, 2022 On 4/28/2022 at 12:09 AM, roxner said: I'd be interested in editing code block for a proper video carousel. Any option other than just stacking videos would be helpful. Preferably a slider arrow option or the codepen Netflix version: https://codepen.io/joshhunt/pen/LVQZRa To add this CodePen > Add a Code Block > Paste this code <div class="contain"> <h1>Pure CSS Netflix Video Carousel</h1> <p> Inspired by <a href="https://twitter.com/Eli_White">Eli White's</a> article <a href="http://eng.wealthfront.com/2015/06/implementing-netflix-redesign.html">Performant CSS Animations: Netflix Case Study</a>, his <a href="https://codepen.io/TheSavior/pen/LVeYBp">example pen</a>, and <a href="http://matthewjamestaylor.com/">Matt Taylor's</a> <a href="https://codepen.io/mattjamestaylor/pen/dodYPr">CSS-only version.</a> </p> <div class="row"> <div class="row__inner"> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> </div> </div> </div> <style> .contain { width: 100%; } .row { overflow: scroll; width: 100%; } .row__inner { transition: 450ms transform; font-size: 0; white-space: nowrap; margin: 70.3125px 0; padding-bottom: 10px; } .tile { position: relative; display: inline-block; width: 250px; height: 140.625px; margin-right: 10px; font-size: 20px; cursor: pointer; transition: 450ms all; transform-origin: center left; } .tile__img { width: 250px; height: 140.625px; -o-object-fit: cover; object-fit: cover; } .tile__details { position: absolute; bottom: 0; left: 0; right: 0; top: 0; font-size: 10px; opacity: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); transition: 450ms opacity; } .tile__details:after, .tile__details:before { content: ''; position: absolute; top: 50%; left: 50%; display: #000; } .tile__details:after { margin-top: -25px; margin-left: -25px; width: 50px; height: 50px; border: 3px solid #ecf0f1; line-height: 50px; text-align: center; border-radius: 100%; background: rgba(0,0,0,0.5); z-index: 1; } .tile__details:before { content: '▶'; left: 0; width: 100%; font-size: 30px; margin-left: 7px; margin-top: -18px; text-align: center; z-index: 2; } .tile:hover .tile__details { opacity: 1; } .tile__title { position: absolute; bottom: 0; padding: 10px; } .row__inner:hover { transform: translate3d(-62.5px, 0, 0); } .row__inner:hover .tile { opacity: 0.3; } .row__inner:hover .tile:hover { transform: scale(1.5); opacity: 1; } .tile:hover ~ .tile { transform: translate3d(125px, 0, 0); } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
roxner Posted May 5, 2022 Share Posted May 5, 2022 8 hours ago, tuanphan said: To add this CodePen > Add a Code Block > Paste this code <div class="contain"> <h1>Pure CSS Netflix Video Carousel</h1> <p> Inspired by <a href="https://twitter.com/Eli_White">Eli White's</a> article <a href="http://eng.wealthfront.com/2015/06/implementing-netflix-redesign.html">Performant CSS Animations: Netflix Case Study</a>, his <a href="https://codepen.io/TheSavior/pen/LVeYBp">example pen</a>, and <a href="http://matthewjamestaylor.com/">Matt Taylor's</a> <a href="https://codepen.io/mattjamestaylor/pen/dodYPr">CSS-only version.</a> </p> <div class="row"> <div class="row__inner"> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-1.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-2.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-3.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-4.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-5.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-6.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-7.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-8.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-9.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-10.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-11.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-12.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-13.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-14.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-15.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-16.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-17.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-18.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> <div class="tile"> <div class="tile__media"> <img class="tile__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/70390/show-19.jpg" alt="" /> </div> <div class="tile__details"> <div class="tile__title"> Top Gear </div> </div> </div> </div> </div> </div> <style> .contain { width: 100%; } .row { overflow: scroll; width: 100%; } .row__inner { transition: 450ms transform; font-size: 0; white-space: nowrap; margin: 70.3125px 0; padding-bottom: 10px; } .tile { position: relative; display: inline-block; width: 250px; height: 140.625px; margin-right: 10px; font-size: 20px; cursor: pointer; transition: 450ms all; transform-origin: center left; } .tile__img { width: 250px; height: 140.625px; -o-object-fit: cover; object-fit: cover; } .tile__details { position: absolute; bottom: 0; left: 0; right: 0; top: 0; font-size: 10px; opacity: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); transition: 450ms opacity; } .tile__details:after, .tile__details:before { content: ''; position: absolute; top: 50%; left: 50%; display: #000; } .tile__details:after { margin-top: -25px; margin-left: -25px; width: 50px; height: 50px; border: 3px solid #ecf0f1; line-height: 50px; text-align: center; border-radius: 100%; background: rgba(0,0,0,0.5); z-index: 1; } .tile__details:before { content: '▶'; left: 0; width: 100%; font-size: 30px; margin-left: 7px; margin-top: -18px; text-align: center; z-index: 2; } .tile:hover .tile__details { opacity: 1; } .tile__title { position: absolute; bottom: 0; padding: 10px; } .row__inner:hover { transform: translate3d(-62.5px, 0, 0); } .row__inner:hover .tile { opacity: 0.3; } .row__inner:hover .tile:hover { transform: scale(1.5); opacity: 1; } .tile:hover ~ .tile { transform: translate3d(125px, 0, 0); } </style> Thanks. You are amazing, @tuanphan! I know to replace the images, I add my own thumbnail image links but where would I put each hyperlink to my Youtube videos in the code? Thanks so much. Can't wait to get this installed! Link to comment
roxner Posted May 5, 2022 Share Posted May 5, 2022 15 minutes ago, roxner said: Thanks. You are amazing, @tuanphan! I know to replace the images, I add my own thumbnail image links but where would I put each hyperlink to my Youtube videos in the code? Thanks so much. Can't wait to get this installed! It would be ideal if the Youtube videos could open in a lightbox but at this point, I'll take what I can get. Looking forward to adding the Youtube links once I find out where the go. Thanks again! Link to comment
tuanphan Posted May 7, 2022 Share Posted May 7, 2022 On 5/5/2022 at 7:16 PM, roxner said: It would be ideal if the Youtube videos could open in a lightbox but at this point, I'll take what I can get. Looking forward to adding the Youtube links once I find out where the go. Thanks again! Do you still need help? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
roxner Posted May 18, 2022 Share Posted May 18, 2022 On 5/7/2022 at 9:51 AM, tuanphan said: Do you still need help? Yes, @tuanphan, Still requiring help on this one. Not sure where to add the Youtube links. Any help is greatly appreciated. Website is https://www.mezzafranchise.com/success-stories-1. I know how to change the thumbnail images but I'm not aware of how to add the Youtube videos from the businesses Youtube page: https://www.youtube.com/channel/UCyapHP1cAjbPMnZrzfHq5Jw/videos Thanks for any info you might be able to provide. Ryan Beyondspace 1 Link to comment
Hold_Fast Posted February 14 Share Posted February 14 Hi @roxner, I was wondering if you figured out a solve for adding the lightbox feature to the video carousel? Thanks! Eric Link to comment
Beyondspace Posted March 15 Share Posted March 15 (edited) On 5/18/2022 at 9:23 PM, roxner said: Yes, @tuanphan, Still requiring help on this one. Not sure where to add the Youtube links. Any help is greatly appreciated. Website is https://www.mezzafranchise.com/success-stories-1. I know how to change the thumbnail images but I'm not aware of how to add the Youtube videos from the businesses Youtube page: https://www.youtube.com/channel/UCyapHP1cAjbPMnZrzfHq5Jw/videos Thanks for any info you might be able to provide. Ryan You can use Gallery blocks to add a Carousel of Youtube video, check out Classic Gallery block, In case you need a mixed video lightbox as seen here , try this instead Squarespace video lightbox tutorial Edited October 16 by Beyondspace BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Kalie Posted September 30 Share Posted September 30 Did anyone figure out where to input the YouTube links? Beyondspace 1 Link to comment
tuanphan Posted October 6 Share Posted October 6 On 10/1/2024 at 5:35 AM, Kalie said: Did anyone figure out where to input the YouTube links? You can use Gallery Block, you can add Youtube Link like as way you added in 7.0 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Beyondspace Posted October 16 Share Posted October 16 On 10/1/2024 at 5:35 AM, Kalie said: Did anyone figure out where to input the YouTube links? Have you try this code? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
wsnider28 Posted October 25 Share Posted October 25 But is there any way to have a video carousel with videos uploaded to Squarespace, and not on YouTube, Vimeo, or elsewhere? Beyondspace 1 Link to comment
Beyondspace Posted October 26 Share Posted October 26 5 hours ago, wsnider28 said: But is there any way to have a video carousel with videos uploaded to Squarespace, and not on YouTube, Vimeo, or elsewhere? Not that I know of, if you consider a video lightbox opened from a carousel, check this BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment