Chipotle Inspired Video BG

Hi everyone!

I was hoping I can get some help with a client’s site. I’ve never worked with Video Background before so I’m stuck. My client wants to have a similar background to Chipotle’s Hero. Link: https://www.chipotle.com/ So it seems having a 100VW and a set height would be ideal. I currently have it set to 30 REM. But between desktop and laptop screen, the fit is so different. It seems to cut off from the height and we would like to have the entire video shown. Is this possible with the video I have or do we have to fix the dimensions? My client had a video editor edit the video inspired by the Chipotle one so I’m not sure if it’s a me issue or video dimension issue.

Thanks in advance!

Here’s my share link (the whole site is still under dev so ignore all of the other bugs we have going on, one thing at a time hahaha): Webflow - Olliefrog Toad Skater


Here is my site Read-Only: (Webflow - Olliefrog Toad Skater)

Live: https://olliefrog-toad-skater.webflow.io/

Hello @mayrajanettee

Your video is the same height on Desktop and Laptop - on both screens it is 480px height (30Rem).

It just looks wierd on desktop because the screen is so much wider.

Try giving your Background Video Wrapper a responsive height such as 40vw so it holds the same dimensions across all devices.

I recorded a video to show you what I mean. I did it in Chrome Dev Tools so you can see the video on the live site but it will be easy to implement in the designer:

Loom Video

Cheers, Dave

Thanks so much for responding, Dave!

I went ahead and applied the 40vw to the height, however on laptop it takes up the entire screen and I would like it to only take a portion of the screen since there’s other elements I need to also be apart of the hero section. I have attached an image on what it looks like from my laptop.

Here’s an image of what the original design we are going for. Minus the heading.

Hey no problem,

You can play around with the numbers to get the exact look you want.

Maybe it’s 30vw maybe its 35vw - I don’t know but whatever you choose it will remain in a consistent ratio.

Good luck!