Matching video block size to images in a grid

Hey, I'm in 7.1 and creating a page with a grid of images that i want to have a few videos mixed in with. I want the videos and images to display at the same proportion so that the grid has even spacing, and size of images and videos stay consistent as the page is scaled.

The videos and images are vertical (4:5). I've been desperately trying to resize video blocks so that they fit in line with the images, and have got them pretty close with this css below. They are now the same width as the image blocks, and I can tweak the padding % value to get the videos the right height at one screen size, but as soon as the page is scaled slightly the video blocks become too long or short.

.video-block .video-player {padding-bottom:74%;}
.video-block video {object-fit: cover !important;}

Is there any way I can make the height snap to the grid or reflect the image height?

Thankyou in advance!