How to make background video responsive (preserving ratio)?

Design help General
1

Hello! I am finishing up a website for a client and the Background Video feature is not rendering correctly. Does anyone know how to render the correct sizing for a bg video so it doesn’t crop out (see below)

Desktop
Desktop1160×799 53.6 KB

Mobile.PNG
Mobile.PNG828×1792 52.2 KB

2

1st step is to send us a Read-only file. Thanks!

3

Thank Jim!

https://preview.webflow.com/preview/kimkris-beauty?utm_medium=preview_link&utm_source=designer&utm_content=kimkris-beauty&preview=d735ed6484e4a6e7e5099c7a4964728b&workflow=preview

4

I stripped your Learn page of all content except for the Background video - Makes testing easier. I added a Section (Display Block) to the Body 6 and dropped the video in it. I then sized the video for each breakpoint - Tablet | Mobile Landscape | Mobile Portrait

  • Tablet -width 100% / Height 46%
  • Mobile landscape -width 100% / Height 34%
  • Mobile portrait - width 100% / Height 19%
    If you need room above or below the video for your other content you can increase the height %.
    All 4 breakpoints play that video full size in preview
    Screen Shot 2022-01-04 at 5.36.53 PM
    Screen Shot 2022-01-04 at 5.36.53 PM690×550 92 KB

Here’s a screenshot of the iPhone 11 width with your content reinstalled >>

Screen Shot 2022-01-04 at 5.56.11 PM
Screen Shot 2022-01-04 at 5.56.11 PM878×938 260 KB

5

hi @Aimee_Hernandez here is another possible solution how to make video responsive while keeping its ratio.

But this topic is covered on forum many times.

4 Likes