If you can use the open source HTML5 video player, videoJS, it support a ‘Fluid’ mode which will allow you set a chosen aspect ratio to be maintained when the video resizes.

They provide details including configuration here: https://docs.videojs.com/tutorial-layout.html

An example configuration:

var player = videojs('vid2');

//Set fluid mode
player.fluid(true);

//Set aspect ratio - 1:1 is square in this example
player.aspectRatio('1:1');

//Set UI to be responsive
player.responsive(true);

I have an image similar to this one

And I’d like to insert a video in it and keep its ratio when reducing the size of my screen.
Only the width needs to be responsive as it’ll be shown in portrait on mobile.

I have no idea how to do that using CSS. I tried using an absolute position and some percentages, but when resizing, the ratios are not really respected and the video becomes smaller