Solution 1 :

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:

An example configuration:

var player = videojs('vid2');

//Set fluid mode

//Set aspect ratio - 1:1 is square in this example

//Set UI to be responsive

Problem :

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