Jump to content

Resizing Video Blocks with Custom CSS to be correct height makes part of Section only one row on the Fluid Grid

Recommended Posts


I am trying to create a selected work gallery/feed that includes a lot of video blocks (See Figure 1). I have used vimeo in the past but now that you can't hide the video player UI I have gone back to video blocks. 

I am using custom code to get the video blocks to resize from 16:9 to their original aspect ratio however it means it messes up the spacing of the video next to it (see Figure 2&3). Is there any way of making the video become its original size whilst also fitting together with the correct spacing?

Thanks for any of your time, this forum is the best.

This is the custom code I am using on the page:

padding-top: 2vw !important;

#block-de395942f9140a1f4216.video-block .video-player{

#block-yui_3_17_2_1_1697645890113_14920.video-block .video-player{

#block-yui_3_17_2_1_1698160266506_6216.video-block .video-player{


Figure 1^


Figure 2&3^

Link to comment

I would do it in a classic engine section and put all the videos into columns the way you want and then edit the top padding in the video block to adjust for each video style. The grid gets really weird when you mess with padding inside the containers. When I do this I usually try to use some css selector from the video blocks that can be more generic than the ones you're using. I've had a few client sites where I did this but it is a custom solution. If you want to set up a classic page section with your videos stacked in columns I can look and see how complicated it would be to write up some CSS.

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.