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

Hello,

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:

section[data-section-id="6537c8d79b6d071e93febb83"]{
padding-top: 2vw !important;
}

#block-de395942f9140a1f4216.video-block .video-player{
padding-bottom:0%;
  padding-top:56.3%
}

#block-yui_3_17_2_1_1697645890113_14920.video-block .video-player{
padding-bottom:58%
}

#block-yui_3_17_2_1_1698160266506_6216.video-block .video-player{
padding-bottom:44%
}

Figure 1^

Figure 2&3^

Hey there! So you're trying to get this to be kind of like a masonry layout?

Hey,

Yes exactly! Something similar to this in terms of spacing, but also allowing for a lot of video blocks:

https://ricardoferrol.com/

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.

Thanks Jason, I'll have a go at making it in the classic engine 🙂