Video Collection Page - Change aspect ratio of the displayed video images

Hi,

I have created a members area on a site i'm building for a client. 

Part of the members area has a video collection which works grate and is exactly what the client wanted, apart from her videos are already hosed on Vimeo and to has too many to move to Square Space. The problem as you can hopefully see from the image is that Vimeo has a 16:9 ratio and the collections page is using (I think) 4:3 which cuts of the edges of the video.

Does anyone know how to or have code that will force the images of the videos on the collections page to display in 16:9?

Cheers

Dan

Hi,

Can you share link to this page? We can help easier

Hi @tuanphan,

the link is https://trumpet-cone-hm97.squarespace.com/keep-mums-fit-ondemand-videos for the top level catalog page but the images are displaying the same on the category pages too.

Any help appreciated, just need it to display the video image in the correct aspect ratio.

Cheers

Dan

@tuanphan, thank you so much for your help, very much appreciated.

Hi - did this work?  I am having the same problem.  For some reason in the 'video' page template sqaurespace has made the video aspect ration 3x2.  No idea why as that isn't a standard video aspect ratio.  All my videos are 16x9 and if I use this all the edges will be cropped and the video wont display correctly.  Does anyone know of a fix or a code to make the template video 16x9?  And if so where do I enter the code? 

Thank you for your help. 

Dave

this is the page in question.  

https://octopus-salmon-ra3s.squarespace.com/config/pages

On 2/29/2024 at 4:46 PM, DaveWarren said:

this is the page in question.  

 

https://octopus-salmon-ra3s.squarespace.com/config/pages

https://octopus-salmon-ra3s.squarespace.com/?noredirect

What is password?

I messaged you the password. Thanks

On 3/2/2024 at 7:45 PM, DaveWarren said:

I messaged you the password. Thanks

You can use this CSS code (Website > Website Tools > Custom CSS)

.grid-image-wrapper {
    padding-bottom: 56.25% !important;
}

Are there any updates to this? I can seem to find how to adjust this CSS. 

On 6/8/2024 at 2:50 AM, mrb317 said:

Are there any updates to this? I can seem to find how to adjust this CSS. 

 

If you share link to page where you have problem, we can check again easier.