Video page - Vimeo blurry thumbnail css or script solution?

Hello,

Is there a way to get a customized thumbnail on the video page for Vimeo video, or somehow redirect the thumbnail image link to a proper image?

Using the web inspector, I found that the thumbnail images under "grip-image-wrapper" and "grid-item-image" directed to a Vimeo link :  i.vimeocdn.com.

It's like a cache version of the cover image.

Does anyone have an idea how it can be changed?

I'm having the same issue and would love to see a fix to this! These blurry Vimeo thumbnails look terrible.

I don't understand why you can't just replace the thumbnail on a Videos Page if its a Vimeo link but you can if its directly uploaded to Squarespace?

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.