How to display a vertical video without stretching out the grid?

Hi everyone, first time seeking for help on this platform, as I could not find an answer elsewhere. 

I have added below css to make my 3:4 video look its size.

.video-block .video-player{
padding-bottom:77%
}

However, I find that it stretches out the grid a lot.

And because of this, it makes it difficult to add any text block next to it without creating all the extra space below that is unnecessary (the red line is the smallest I could make the block into).

(Oddly enough, I do not have this issue on the mobile view but desktop view)

Can anyone please advice on what to do? Thank you very much!

47 minutes ago, Ziggy said:

It looks like you need to extend the video block to take up more rows in the grid, then save and refresh the page and try editing the page again.

Thank you Ziggy! I did have to play around a bit to find the right balance (and I had to remove the video first in order to adjust the block size?) as it's more confusing with the added padding, but I think I've managed to do it with your advice! Thank you so much..!

12 minutes ago, melissa61436 said:

I think I've managed to do it with your advice! Thank you so much..!

Nice one! Glad that's working for you now!