Background video sizing responsiveness + mobile

Hi there,
I’ve had a hard time controlling the sizing of background videos for a responsive website.
As the video would be cropped automatically and would not keep its proportions, I’ve been trying to size it by hand for each breakpoint. I tried to work with percentages, vh, vw but its just impossible to control.
Problems:

  • Even though it shows correctly on preview, as soon as I publish the website some of the videos get cropped on mobile.
  • Due to its sizing he video doesn’t fluidly sizes between the different breakpoints.

Browser I’ve tested: chrome, safari, firefox

I’ve been looking online and couldn’t find information to help me with this. Could someone help, please?

published website: https://sbb-bosa.webflow.io/

image


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Also trying to find the solution to this problem…

Couple of ways to achieve this. See link below. This is assuming that your video is 16:9 ratio.