Video page - Vimeo blurry thumbnail css or script solution?

Hi,

I have previously linked certain Vimeo videos to image "blocks" in various pages on SQSP site.  Video thumbnails were "selected from video" on Vimeo.  The thumbnails looked fine in the video blocks on SQSP.

Now trying to link these same videos to a video page (not just a block) on same SQSP site.  (Page is in draft form, so not yet published and visible on site.)  All prior thumbnails look blurry.  To try to resolve, created new thumbnails for videos as follows:  1.  Took screenshot from video and saved as .png file.  2.  Uploaded this file in Vimeo as new thumbnail and saved.   Then copied Vimeo link to revised video.  3.  Completely deleted earlier version of same video from SQSP video page, hit save and also refreshed page.  4.  Selected "Add Video" to the SQSP video page, copied the Vimeo link to video w/ new thumbnail and hit save.  The revised video and new thumbnail are now visible to me on the draft page, but the thumbnail is still blurry.

I need to have clear and crisp thumbnails wherever videos appear on the SQSP site.  Is this a problem with SQSP video pages (vs blocks)?  How can I resolve this issue?

Thank you.

kcln52

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. 

Hey @TommyShims

I've been plagued with this issue for years and i'm currently designing a 7.1 website that relies on gallery blocks for videos, there are simply too many videos to go replacing all the thumbnails with custom ones. 

I was really hoping your code would sort it but it doesn't seem to be working for me. I'm not good with code so it's possible i'm doing something wrong.

Any chance you could take a look at the attached screenshot and let me know if i'm doing something wrong?