miserytakeme

Hi! I'd like a line of text, stylised as H3, that when clicked copies that piece of text to your clipboard, with a pop up / notification that says "Copied to clipboard", is this possible? It's for my email; I know a lot of people (myself included) don't like the mailto: feature as it can open a native, less-preferred email application. If anyone is able to help it would be very appreciated!

This worked, thank you so much!

Hi, I'm looking to target a specific image in a simple list, specifically the 3rd image. No matter what I do I cannot seem to target it correctly, can someone help?

I have built a solution! It adds videos to masonry image galleries and works in lightbox view too! My answer is here:

Hi! Completely agree and sympathise with your frustration, the removal of such a basic feature has been angering me for the longest time, so I've been on a bit of a personal crusade to get it to work and I have! I'm not sure if this is what you mean, but I'm assuming you want to add videos as project thumbnails in a portfolio page? If so, the following code works for me by adding it to the header code injection in the portfolio pages advanced settings: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ //PROJECT 1 $('<video autoplay loop muted playsinline><source src="video-url" type="video/mp4"></video>') .appendTo('a.grid-item[href="/portfolio-page-url/project-page-1-url"] .grid-image-inner-wrapper'); //PROJECT 2 $('<video autoplay loop muted playsinline><source src="video-url" type="video/mp4"></video>') .appendTo('a.grid-item[href="/portfolio-page-url/project-page-2-url"] .grid-image-inner-wrapper'); }); </script> <style> a.grid-item[href="/portfolio-page-url/project-page-1-url"] img, a.grid-item[href="/portfolio-page-url/project-page-2-url"] img, { visibility: hidden; } .grid-image-inner-wrapper video { display: block !important; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } </style> I'm a novice with coding, so this is a bit of a Frankenstein but it works! Essentially what this code is doing is loading the videos next to the thumbnails, and then hiding the original thumbnails. This is set to autoplay, and for that the videos need to be muted. The code should cover this, but I recommend exporting any video / motion content with no audio channels. Also export them as mp4 files too. Bonus tip while I'm at it - 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. 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 - this is what I did for my video thumbnails. Hope this helps!

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!

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

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!

Yes that's correct! If possible, to have it be replaced in Lightbox mode too Apologies for the late response, I did not get a notification for this

Hi all, I hope you're well! So I'm looking to replace an image with a video in a gallery strip section in a project page in a portfolio page. I've managed to do it with the project pages thumbnails using the portfolio header code injection, but I'm struggling to target this specific image. I'll attach a screenshot highlighting the image in particular. The way I did it in the portfolio thumbnails is by displaying the video with the thumbnail and hiding the original image, I'm guessing it will need to be a similar method here. I'm also assuming this will need to be done with a code block as project pages don't have individual header code injection like in the Advanced settings of a page. This is the page in particular (my site is public and there is no password required): https://miserytakeme.design/portfolio/below-the-neck-an-imminent-end This is the static link for the video I'd like to swap in: https://static1.squarespace.com/static/603e3b9f038b852d44eabf1a/t/65eb03b5fad71e419837cf52/1709900742806/BTN+CANVAS+95+PADDING.mp4 If anyone has any advice or is able to help me with this, I would be eternally grateful! Thank you so much for your time

Hey @Ziggy, thank you for the speedy response! Mainly just hiding certain sections depending on screen size - I've got the code working on existing regular pages, just need to replicate them in the project pages I'm also experimenting with replacing a photo with a video in a photo strip gallery on the first project in my portfolio. I managed to do it with the portfolio projects thumbnails, now I'm just trying to replicate this to an image

Hi all, I'm looking to add some header code to each sub page or "project page" of a portfolio page using the code header injection or "Advanced" section in page settings; but they are missing in the sub "project" pages settings. I'll attach screenshots for clarification. How can I go about working around this? Can I add a code block at the top of each page and hide it? Will this limit what I am able to achieve? It's worth noting that I'm looking to use HTML as well as CSS and some scripts in these pages, and they will need to be treated individually from other sub "project" pages in the portfolio page. It is a work in progress, but here is the page I am using if it is relevant: https://www.miserytakeme.design/portfolio If there are any limitations or workarounds you know of, I'd love to hear your insight - I'm still quite new to the coding side of things Thank you!

@dotandpeg Absolutely! It's all still a WIP now and not all of them use videos, but the ones that do are working really nicely! Only issue is they won't autoplay on an iOS device on battery saver mode, but I don't think there's anything we can do to get around that unfortunately I recommend adding images in each pages settings as the videos can take a second or two to load - I used the first frame of the videos www.miserytakeme.design/portfolio Hope this all helps!

I've worked it out!!! Go to Wesbite Tools > Custom CSS > add custom files > upload your video (recommended with no audio channels and in a h.264 codec in mp4 format) (The reason you upload it here I think this is because SS makes temporary URLS when using video files, so you cannot get static URLS in the asset finder like you can with other files, meaning you cannot link to videos using HTML and the like unless it has been uploaded in the Custom CSS workspace) Then go to a blank portion of your CSS workspace below, click to add your cursor, now click your custom files and you should get a static link in which you can use this code - I have updated and modified Taunphans for support with autoplay on iOS Safari <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> $(document).ready(function(){ $('<video autoplay loop muted playsinline><source src="URL FROM CUSTOM CSS FILE UPLOAD" type="video/mp4"></video>') .appendTo('a.grid-item[href="/yourportfoliopageurl/yourportfoliosubpageurl"] .grid-image-inner-wrapper'); }); </script> <style> a.grid-item[href="/yourportfoliopageurl/yourportfoliosubpageurl"] img { visibility: hidden; } .grid-image-inner-wrapper video { display: block !important; position: absolute !important; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } </style>

THANK YOU SO SO SO MUCH!!!!!! You have ended hours and hours of frustration and searching, thank you so so so much!