Jump to content

Video page - Vimeo blurry thumbnail css or script solution?

Recommended Posts

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

 

Link to comment
  • 3 months later...

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?

Link to comment
  • 1 month later...
  • 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.

 

<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. 

Link to comment
  • 9 months later...

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?

Screenshot 2024-01-24 at 09.28.23.png

Link to comment
  • 4 months later...

I successfully used this script for my Video collection page!

I also adapted the script for "related video" thumbnails with the following code:

<script>
window.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('img.related-item-thumbnail');
  images.forEach(image => {
    const src = image.getAttribute('src');
    if (src.includes('295x166')) {
      const newSrc = src.replace('295x166', '640');
      image.setAttribute('src', newSrc);
    }
  });
});
</script>

 

Now I'm trying the fix the summary block that's linked to the video collection, but I can't get it to work! I tried replacing  'img.related-item-thumbnail' with 'img.summary-thumbnail-image' and some variations of this but nothing worked.

Can anyone help with this??

 

Website: https://keyboard-wedge-26cw.squarespace.com/work

PW: test123

 

Thank you coding angels!!

Link to comment
1 hour ago, Chlobot said:

I successfully used this script for my Video collection page!

I also adapted the script for "related video" thumbnails with the following code:

<script>
window.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('img.related-item-thumbnail');
  images.forEach(image => {
    const src = image.getAttribute('src');
    if (src.includes('295x166')) {
      const newSrc = src.replace('295x166', '640');
      image.setAttribute('src', newSrc);
    }
  });
});
</script>

 

Now I'm trying the fix the summary block that's linked to the video collection, but I can't get it to work! I tried replacing  'img.related-item-thumbnail' with 'img.summary-thumbnail-image' and some variations of this but nothing worked.

Can anyone help with this??

 

Website: https://keyboard-wedge-26cw.squarespace.com/work

PW: test123

 

Thank you coding angels!!

 

<script>
window.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('.summary-thumbnail img, img.related-item-thumbnail');
  images.forEach(image => {
    const src = image.getAttribute('src');
    if (src?.includes('295x166')) {
      const newSrc = src.replace('295x166', '640');
      image.setAttribute('src', newSrc);
    }
  });
});
</script>

Try

image.thumb.png.20fb3a3624e97dd4ebf50ff36872823e.png

Edited by Beyondspace

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

the URL actuall changes to 640?

image.thumb.png.e4ecc4ee5922309e02a7f82c404d14fc.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Did you use 3rd plugin with the summary block?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

HI @Beyondspace

I removed the extra scripts and I no longer need the related video thumbnails so I removed that part too, but it's still not working 🥲

Here's what I have in the code inject footer:


<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', '1280');
      image.setAttribute('src', newSrc);
    }
  });
});
</script>


<script>
window.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelectorAll('.summary-thumbnail img');
  images.forEach(image => {
    const src = image.getAttribute('src');
    if (src?.includes('295x166')) {
      const newSrc = src.replace('295x166', '640');
      image.setAttribute('src', newSrc);
    }
  });
});
</script>

The homepage video collection thumbnails are working but still not the summary block images...

 

 

Screenshot 2024-06-14 at 11.46.56.png

Link to comment

Your page is no longer available to see

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
4 minutes ago, Chlobot said:

@Beyondspace hi, just checking in about the blurry video thumbnails in the summary blocks. The website is now live! The pages with the blurry thumbnails are:

 https://www.tempestoriginal.com/trailers

https://www.tempestoriginal.com/advertising

Any help with this would be much appreciated!!!

Change the callback event to window.load, it works

<script>
window.addEventListener("load", (event) => {
  const images = document.querySelectorAll('.summary-thumbnail img');
  images.forEach(image => {
    const src = image.getAttribute('src');
    if (src?.includes('295x166')) {
      const newSrc = src.replace('295x166', '640');
      image.setAttribute('src', newSrc);
    }
  });
});
</script>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

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.