How Can I Make My Hero Video Responsive on Mobile and Tablet in Webflow?

Hello!

I’m trying to adjust my website’s hero video to be more responsive on tablet and mobile devices. Currently, the video doesn’t resize properly; instead, it gets cut off on smaller screens. I’m looking for a solution to ensure it scales down correctly.

I’d like to achieve a responsive behavior similar to the hero video on this website. I’m open to other responsive design approaches as well.

Can you advise on the best way to fix this?

Here’s the Read-Only link to my Webflow site for reference:

https://preview.webflow.com/preview/flow-library-site-4d34ce?utm_medium=preview_link&utm_source=designer&utm_content=flow-library-site-4d34ce&preview=565301218757c7b322cd4460ea0e70df&workflow=preview

Thank you for your help!

hi @WebFlowRulez website you are referencing use hardcoded sizes in media-queries so it is not responsive it is just set to exact size.

I do not know what research you have done on you own but on forum is many solved requests when it comes to responsive video. Use magnifier icon to search forum and you can use filter to narrow down only solved requests.

in meantime you can add into your HTML embed under video element this code to make video responsive to keep its own size ratio.

<style>
  video{
    aspect-ratio: 16/9;
  }
</style>

you can also delete hardcoded width and hight for wrapper and embed elements