Jump to content

Summary, Related and Video Blocks - Letterbox and Thumbnail Problems

Go to solution Solved by cro0w,

Recommended Posts

Hello,

When taking advantage of summary blocks, related videos, and video library features, there's a big and sad bug that Squarespace doesn't seem interested in fixing. Let's start with the video library.

https://vivsharon.squarespace.com/video-testimonials
PW: 123

 

1. If you choose to take advantage of this feature, if you plan on embedding YouTube videos, be ready to hate your life. This will be the result, and no, you can't have custom thumbnails, on embeds, why? IDFK either?!

image.thumb.png.08f162f0f5cd23dd6ff67a63a83b1a8b.png

Solution? Code. Not sure how to give them rounded corners.

// Video Page Thumbnails
.lessons.collection-content-wrapper .grid-image-wrapper {
    padding-bottom: 56.25%;
}

image.thumb.png.9162db073c52e2fe56fd5aade095eb0c.png

but it doesn't stop there. Let's move on to Summary blocks (Carousel). You guessed it right! Broken.

image.thumb.png.54f03fcf55cc7012b8a4a2bb5ca6eb6c.png

2. How can we resolve this situation? Not sure, I was able to give them a rounded borders tho. 

image.thumb.png.ac40139a731dec1c87f0f97e0d099ad3.png

 

// Summary Block Thumbnails
.summary-thumbnail-image {
    border-radius: 15px;
 	overflow: hidden;
}

 

3. Next problem, related videos, and yes, you guessed it right, broken. 

image.thumb.png.ad2391ef12dc92401380c373a2762312.png

Not sure, but we gave them also rounded corners. 

image.thumb.png.46ec4b8ab96269258761bdc362dc44e3.png

// Recommended Thumbnails
.lessons-item-related-wrapper .lessons-item-related-item-list .related-item img.related-item-thumbnail {
    border-radius: 15px;
}

 

Does anyone know how to solve this issue with the letterbox on videos being recommended or pulled through summary blocks? 

 

Edited by cro0w
Minor grammar edits.
Link to comment
  • Solution

Once again this forum proves to no be super helpful for me, I've posted many times I never get help and come back to figure it out. For those of you with the same problem that Squarespaces causes when using YouTube Embeds on their site, specifically with loading them on the video library for Squarespace 7.1.

I assume they do this cus they want you to upload your own videos and then have to pay them more, ridiculous! 

Here's all the codes to fix what I needed from my original post. You can clean up anything else. 

/* Recommended Thumbnails */
.lessons-item-related-wrapper .lessons-item-related-item-list .related-item .related-item-link-thumbnail {
    height: auto;
}

.lessons-item-related-wrapper .lessons-item-related-item-list .related-item img.related-item-thumbnail {
    border-radius: 15px;  
    aspect-ratio: 16/9 !important;
}

/* Hover mode */
.lesson-item .related-item {
    transition: transform 0.3s ease-out; /* Initial transition for smoother return */
}

.lesson-item .related-item:hover {
    transform: translateY(-10px);
    transition: transform 0.3s ease-in-out; /* Transition on hover with ease-in-out for smooth effect */
}


/* Summary Thumbnails */
.sqs-block-summary-v2 .summary-thumbnail-container img.loaded {
    border-radius: 15px;
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Video Library Thumbnails */
.lessons.collection-content-wrapper .grid-image-wrapper {
    padding-bottom: 56.25%;
}

.grid-image {
    border-radius: 15px;
}

I hope this helps someone else get rid of the black bars on YouTube thumbnails. 

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.