Jump to content

Video page - Vimeo blurry thumbnail css or script solution?

Recommended Posts


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?

Link to comment
  • 1 month later...
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

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?

Link to comment
  • 3 weeks later...

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.


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);


You can modify the code to target other elements too if needed. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.