miserytakeme Posted March 25 Share Posted March 25 (edited) Hi I'm looking to replace an image with a video in a gallery section using a link. My website is here: https://miserytakeme.design/portfolio/cover-art There is no password required I want to replace the second image / animated gif (the red one) with a video using a static link; and show up in the Lightbox view too. Thanks! Edited March 27 by miserytakeme Clarification Link to comment
tuanphan Posted March 27 Share Posted March 27 So you want to do 2 things Replace Image with Video Click Video > Open Video in a Lightbox? 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
miserytakeme Posted March 27 Author Share Posted March 27 4 hours ago, tuanphan said: So you want to do 2 things Replace Image with Video Click Video > Open Video in a Lightbox? That is correct, but I have already got it set up and working, I will be adding the solution below in a moment for those who it may help Link to comment
Solution miserytakeme Posted March 27 Author Solution Share Posted March 27 I managed to get this working, here is the solution and explained to the best of my ability. I am very new to CSS and Javascript so some of the code or properties may be redundant, but it works for me on both Safari and Chrome, desktop and mobile, and videos will autoplay! It is worth noting that this is for a Masonry styled image gallery in 7.1. I put the following code into a code block on the same page. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ /* APPEND VIDEO */ /* IMAGE 1 */ /* GALLERY */ $('<video autoplay loop muted playsinline><source src="VIDEOURL" type="video/mp4"></video>') .appendTo('section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n)'); /* LIGHTBOX */ $('<video autoplay loop muted playsinline><source src="VIDEOURL" type="video/mp4"></video>') .appendTo('[data-slide-url="LIGHTBOXURLEXT"]') /* IMAGE 2 */ /* GALLERY */ $('<video autoplay loop muted playsinline><source src="VIDEOURL" type="video/mp4"></video>') .appendTo('section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n)'); /* LIGHTBOX */ $('<video autoplay loop muted playsinline><source src="VIDEOURL" type="video/mp4"></video>') .appendTo('[data-slide-url="LIGHTBOXURLEXT"]') }); </script> <style> /* IMAGE 1 */ /* HIDE IMAGE IN GALLERY - GET BLOCK ID AND IMAGES NUMBER IN GALLERY */ section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n) img {opacity: 0; z-index: 100;} /* STYLE VIDEO IN GALLERY - GET BLOCK ID AND IMAGES NUMBER IN GALLERY */ section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n) video {display: block !important; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;} /* STYLE VIDEO IN LIGHTBOX - GET CODE FROM URL EXTENTION IN LIGHTBOX VIEW */ [data-slide-url="LIGHTBOXURLEXT"] video {display: block !important; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;} /* IMAGE 2 */ /* HIDE IMAGE IN GALLERY - GET BLOCK ID AND IMAGES NUMBER IN GALLERY */ section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n) img {opacity: 0; z-index: 100;} /* STYLE VIDEO IN GALLERY - GET BLOCK ID AND IMAGES NUMBER IN GALLERY */ section[data-section-id="XXXXXXXXXXXXXXX"] .gallery-masonry-item:nth-child(n) video {display: block !important; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;} /* STYLE VIDEO IN LIGHTBOX - GET CODE FROM URL EXTENTION IN LIGHTBOX VIEW */ [data-slide-url="LIGHTBOXURLEXT"] video {display: block !important; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;} </style> To get your block ID, use this Chrome extension. To get your Lightbox URL extension, make sure your gallery has lightbox enabled, view the image you want to replace in the lightbox / fullscreen view. You should have a string of numbers and letters show up at the end of your URL, it should look something like "?itemId=bdyjwf4fjh46g00rbsy6n1yjyxdc9b-w3d7x-lw9jy". You won't need the "?itemId=", just the numbers and letters afterwards. "nth-child(n)" refers to the number of the image you want to target. For example, if you wanted the third image in your gallery to be changed to a video, it would need to be formatted as "nth-child(3)". For video URL's, I know it is hard to find links to your uploaded videos to Squarespace. I am unsure on the technicalities behind it, but I believe you cannot get a single link to your uploaded video. The workaround I found, was going to Website Tools > Custom CSS > Custom Files and uploading your videos there. I suggest exporting your videos as mp4 files for this. Once they have finished uploading, you can click the video file and a URL will appear in the CSS workspace. Just copy this full URL, delete it in the CSS section, and then add it into this code. If the URL ends in ".mp4", you will need that too. I believe this is everything you'll need to get this code working, even if you aren't well versed in coding like myself, I'm still very new to it. If you are having issues I will try to help but I may not be able to understand the issue, I apologise. If any experienced developers have any feedback or can help streamline this; feedback is welcome! Beyondspace and tuanphan 2 Link to comment
Beyondspace Posted June 3 Share Posted June 3 (edited) @miserytakeme Thanks for purchasing Lightbox Studio and worked closely with me on this matter, so far you can create a Video gallery lightbox using Classic Gallery block. But in your case it is not a choice, so I have plan to update Lightbox Studio in order to support Video lightbox on Grid sections, the initial thoughts can be found on this post Proposal: Creating a Video Gallery with Squarespace Gallery Sections The workaround would be insert Video URLs into Gallery slide clickthrough URLs, where the videos can be uploaded on these places to grab the links - Vimeo - Youtube - Custom files in Custom css panel - File Upload in Squarespace Link Editor Once the plugin found the video URLs in the slide it will automatically create a video slide in lightbox so visitors can play them on lightbox To neutralize the Lightboxify URLs, making the image slide to be redirect to the targeted video URL, you can explicit append the lightboxify URL param to the end of the video, for example: https://vimeo.com/video/936074974 turn to https://vimeo.com/video/936074974?lightboxify=false Edited July 22 by Beyondspace miserytakeme 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🚀 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
Beyondspace Posted June 5 Share Posted June 5 (edited) Squarespace video lightbox is live now! Latest updates of Lightbox Studio now enable you to turn video links into Video slide in lightbox, support: YouTube Vimeo Videos uploaded to Custom CSS Panel (Custom files) Videos uploaded to Link Editor Panel When insert a video link to Gallery section clickthrough URL of the images, you can make them play videon on lightbox, support all layouts include: Grid: Simple Gallery section Grid: Strips Gallery section Grid: Masonry Gallery section Slideshow: Simple Gallery section Slideshow: Full Gallery section Slideshow: Reel Gallery section The detail post can be found on How to create video Lightbox gallery on Squarespace 7.1 Sections cc @miserytakeme Kapture 2024-06-05 at 08.42.51.mp4 Edited July 22 by Beyondspace miserytakeme 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🚀 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
miserytakeme Posted June 5 Author Share Posted June 5 Thank you so much to @Beyondspace who was able to help me with implementing my needs for video within a lightbox enabled gallery, and adding this feature to their incredible plugin! This plugin has genuinely been a game changer for my site - being able to pinch zoom and display videos within an image gallery has been missing from Squarespace for far too long, and I found it incredibly frustrating that even after YEARS of people asking, this is still such a basic feature they continue to overlook. The Lightbox Studio Plugin honestly is amazing. I'm quite new to coding, so although I managed to get my videos working as stated in this thread, it was very messy and fiddly and time consuming to update. Beyondspace managed to really refine and streamline this and combine it with their incredible Lighbox Studio plugin. As a freelancer who's work relies on visuals, it is so important that my website is displayed how I intend it to be without compromise, and that my visitors can intuitively see and interact with my content, and zoom in on the details. I had been holding off on launching my site for nearly 6 months as I was trying to get the video to work, but with the Beyondspace plugin I was able to get what took me months complete within a couple of hours, and launched that same day Seriously recommend this plugin to all Squarespace users that focus on visual content, and to all graphic designers, motion designers, 3D artists, photographers and videographers out there. You won't regret it! 6 hours ago, Beyondspace said: cc @miserytakeme Kapture 2024-06-05 at 08.42.51.mp4 4.42 MB · 0 downloads raeroshow and Beyondspace 2 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