Jump to content

Summary, Related and Video Blocks - Letterbox and Thumbnail Problems

By cro0w, in Customize with code

Go to solution Solved by cro0w,

Recommended Posts

cro0w Level 5

cro0w

Posted
Posted (edited)

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.
  • Replies 4
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

cro0w
cro0w

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

cro0w
cro0w

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 vide

insuficientspectrum
insuficientspectrum

Thank you so much for this code!   Saved me as well, although I don't want to round my videos, any chance you can give me this string of code without rounding the videos?   Once ag

Posted Images

  • Solution
cro0w Level 5

cro0w

Posted
  • Author
  • Solution
Posted

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. 

  • 6 months later...
tuanphan Level 18

tuanphan

Posted
Posted
On 9/4/2024 at 12:50 AM, insuficientspectrum said:

Thank you so much for this code!

 

Saved me as well, although I don't want to round my videos, any chance you can give me this string of code without rounding the videos?

 

Once again, you are a lifesaver

I think this code for mobile, you can remove it

image.thumb.png.926da56621b1cb189a6afec876cc1505.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 1 month later...

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources