I had this issue too and found Squarespace was pulling low-res (295x166) thumbnails from Vimeo by default. You can see this by inspecting the src for "img.grid-item-image".
The link will look like this i.vimeocdn.com/video/....-d_295x166. Changing the last part to -d_640 gives you a higher-quality image.
This script below finds any 'img.grid-item-image' elements on a page and checks if their 'src' attribute includes "295x166". If it does, it replaces that part of the URL with "640" and sets the updated URL as the new src attribute value for the image.
To use this code, you can add it to the "Code Injection" section of your Squarespace site. Go to "Settings" > "Advanced" > "Code Injection" and paste the code into the "Footer" section. Save the changes and then refresh the page to see if the images have been updated with the new URL.
<script>
window.addEventListener('DOMContentLoaded', () => {
const images = document.querySelectorAll('img.grid-item-image');
images.forEach(image => {
const src = image.getAttribute('src');
if (src.includes('295x166')) {
const newSrc = src.replace('295x166', '640');
image.setAttribute('src', newSrc);
}
});
});
</script>
You can modify the code to target other elements too if needed.