How to Make a Video Block Fill the Frame

Hi, I am wondering if there is a way to have my video fill the full size of the frame (the same way an images does)? I am currently using this code:

#block-yui_3_17_2_1_1705927316935_8707.video-block .video-player{
padding-bottom:61%
}

But it isn't very precise, no matter what I change the percentage to.

This is for a portfolio page and we need all the images to align. I have attached screenshots to show this. Is there custom code to allow a video block to act like an image block and fill the frame, cropping off anything that falls outside of the frame so that it can be responsive (exactly like the image blocks do)?

Any help or suggestions would be greatly appreciated.

Thanks, Chris

https://bugle-dory-srgh.squarespace.com/ni-opera

Pass: parttwo

@jpeter That works perfectly! Thank you so much!

Can I add this to multiple videos on one page if I change the #block number? I tried it on a couple more videos and they are only showing a small slit of the video. Is it possible to fix this?

Thank you so much for all your help so far!

Chris

@PartTwoDesign It looks like you may have been trying to divide the sections using, -----------------------, but the appears to be breaking the CSS. If you want to divide the section of CSS, use a CSS comment insead by adding an opening /* and closing */ like so: /* ---------------------- */

Here's a video deleting the divider using Chrome dev tools and that fixes the issue:

@jpeter Ahhh, yes I was trying to divide the sections so I could tell them apart.

 Thank you so much! It's working perfectly now. You have been an amazing help!!

Thanks again,
Chris

@jpeter Hi, I tried the same code you provided above and replaced the block id to mine, but it didnt work. Possible to help me out here?

https://www.chrisscholzdesign.com/home/girl-skateboards-x-active

pw; CSDesign123