sunnyside 51 Share Posted April 19, 2015 (edited) I'm trying to use a button that says 'Play' similar to this That when clicked pops up a video in a lightbox. Anyone know how to do this? Edited April 19, 2015 by sunnyside SydneyM, basderks and nickrave 3 Link to post
2 Caue 245 Solution Share Posted May 14, 2015 (edited) Out of so many possible ways to do it, this is how I've done it: http://www.cregox.com/full-video/ There are quite many steps and options there. Here I'll write the most simplified version, with very basic steps which might not be so easy to follow but should be enough if you know how to find your way: First, .Then, create a link anywhere you want with this updated to your video ID: javascript:jqueryLightbox('RpLBR38kVvY'); Then, add the following script somewhere: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script name="full video lightbox" author="cregox.com"> // to use it, create a gallery block, make it a grid and check the Lightbox. // now add an item to it, either with the plus button or from another gallery. // finally add a link to any block you want, // calling jqueryLightbox function with a video url string. // for instance, to a vimeo video: // javascript:jqueryLightbox('video/127121696'); // // for more info, visit www.cregox.com/full-video $(document).ready(function(){ $('a[href^="javascript:jqueryLightbox("]').each(function(){ var $videoButton = $(this); var videoString = $videoButton.attr('href').split("('")[1].split("')")[0]; var $galleryLightbox = $('div[data-html*="'+ videoString +'"]'); $galleryLightbox.parents('.sqs-block-gallery').hide(); // this is the line not being used in this page var $galleryLightboxImg = $galleryLightbox.find('img'); $videoButton.click(function(){ $galleryLightboxImg.hide(); // as to not show them before loading video $galleryLightboxImg.click(); }); $videoButton.attr('href', 'javascript:'); $videoButton.addClass('lightboxed'); }); }); function jqueryLightbox (videoString) { alert('jQuery not loaded'); } </script> Edited May 14, 2015 by Caue If you need support building your website, talk to me! <-- Check the link on the side. Link to post
1 ViktoriiaP 0 Share Posted August 3, 2017 Sorry can someone help me out here please. I can't wrap my head around it. I added long code to the Code Injection Section.I am having hard time to create a link for the button: watch how My video id is yui3172815017850435681117 Thank you in advance! Link to post
0 sunnyside 51 Author Share Posted April 19, 2015 When you use a button it only allows you to 'Clickthrough' to a URL. I want it to bring up a video on the same page. Link to post
0 deejayt 0 Share Posted July 24, 2015 Does anyone have any pointers on making the pop up fit the width of a mobile screen?At present it fills to the height and therefore won't let you play the video on mobile's (I'm using iOS for testing) www.blockandlast.com Any help would be appreciated. Link to post
0 deejayt 0 Share Posted July 24, 2015 Does anyone have any pointers on making the pop up fit the width of a mobile screen?At present it fills to the height and therefore won't let you play the video on mobile's (I'm using iOS for testing) www.blockandlast.com Any help would be appreciated. Link to post
0 Chopdog 35 Share Posted May 13, 2016 This is great. Would you happen to know how I could apply such a technique to having a pop up lightbox video from clicking a button in the header space rather than the main body? Link to post
0 Chopdog 35 Share Posted May 13, 2016 This is great. Would you happen to know how I could apply such a technique to having a pop up lightbox video from clicking a button in the header space rather than the main body? Link to post
0 fuzzykit 7 Share Posted July 21, 2016 @Caue, I'm looking to implement this in my website melvin-sng-axe3.squarespace.com. I should have made a mistake somewhere because nothing happens when I click on the button I created for the javascript. What I did was: I created a page under the Not Linked section to contain the gallery grid. I created a button on one of my index pages with the javascript. I put the above script via Code Injection section under Advanced settings. Would you please advise? Thanks in advance! Mel Link to post
0 Caue 245 Share Posted July 22, 2016 Sorry, @fuzzykit I couldn't find the button or the script loaded there. Where are they supposed to be, exactly? Maybe they're in a page we can't see unless you link it to us. I'm actually amazed my script is still working 1 year later... It doesn't matter if the page is linked or not, at all. The gallery grid could have an effect, but probably not as well. Try looking on the javascript console for error messages, they are usually very helpful. That 5 minute challenge does sound interesting. :) If you need support building your website, talk to me! <-- Check the link on the side. Link to post
0 fuzzykit 7 Share Posted July 23, 2016 @Caue, Thanks for being interested in the challenge. It is indeed interesting. I removed the button since I could not get it to work. I have put it back on the main banner. It's the "Watch Video" button. I have now created the gallery grid as part of the index. You should be able to see the same. I tried looking at the console but there is not error message. I have tried adding the script at multiple locations - Advanced > Code Injection and "Advanced" tab of the index page. None works. :( Hope you could help me. Thanks! Link to post
0 Caue 245 Share Posted July 24, 2016 Ok, I'm just guessing here, but maybe you should keep the thumbnail on the gallery. Maybe the script could be modified to work even with "No Thumbnail" but right now I think it pretty much relies on it. Hopefully that's all. If you need support building your website, talk to me! <-- Check the link on the side. Link to post
0 fuzzykit 7 Share Posted July 24, 2016 Hi @Caue, I got it working. But what I found is the gallery block must be within the index page. Having it in an unlinked page will not work. Not sure if I missed something. Link to post
0 omarimc 136 Share Posted August 11, 2017 If you're still stuck this plugin will get it to work without fiddling any code https://www.sqspthemes.com/plugin-shop/squarespace-video-lightbox-button rachelr and stehan 1 1 Customize and optimize your Squarespace with SqspThemes.com Link to post
0 EdStemp 0 Share Posted January 30, 2020 (edited) Hello. Im trying to do this on my site - adding a vimeo lightbox in my header banner without changing the thumbnail. Can you advise? Im using Brine. https://megalodon-rose-khl5.squarespace.com/pages Password: Testingpassword Thanks for any help in advance. Edited February 10, 2020 by EdStemp Link to post
0 RolandFuseHub 240 Share Posted June 13, 2020 This is a great video lightbox option: https://www.fusehub.ca/video-plugin Link to post
Question
sunnyside 51
I'm trying to use a button that says 'Play' similar to this
That when clicked pops up a video in a lightbox.
Anyone know how to do this?
Edited by sunnysideLink to post
Top Posters For This Question
3
3
2
2
Popular Days
May 13
2
Apr 19
2
Jul 24
2
Jul 24
2
Top Posters For This Question
Caue 3 posts
fuzzykit 3 posts
sunnyside 2 posts
deejayt 2 posts
Popular Days
May 13 2016
2 posts
Apr 19 2015
2 posts
Jul 24 2015
2 posts
Jul 24 2016
2 posts
Popular Posts
omarimc
If you're still stuck this plugin will get it to work without fiddling any code https://www.sqspthemes.com/plugin-shop/squarespace-video-lightbox-button
Posted Images
16 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment