How can I set background video max height keeping the ratio?

Hi!

I’m trying to preserve the 16:9 aspect ratio of my background video on the Donate page, which I have achieved with 56.25% padding and auto height on the .bgvideo element, it works great, but I would like it to never exceed 100vh of the screen and keep the ration, it’s ok if the video will have black borders on the edges.

I tried to add Max-Height: 100vh on the section that wraps that bg video, but it didn’t work.

Please help


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

Hey Dmitry,

I tried some things with your read only link and here’s my results. I placed the BG Video inside it’s own div block (within your video section) and set the div to flex and middle aligned.
See the screenshots to match the settings if you like.

1 Like

Hey Ben, thanks for this, I tried this , but I didn’t get what you have. I’ve updated my project, could you see if I didn’t set quite like you did? Also I’m trying to preserve the video aspect ratio, so removing the 56.25% padding is not ideal

Hey did you resolve this? Just tried to take a look at your read only link and I got a 404.

1 Like

Yes, sorry forgot to reply, I eventually solved it by adding a separate video element to the desktop layout.

If anyone is looking for an updated way to do this, you can add the aspect-ratio css property with custom code:

<style>
 .video, .video video {aspect-ratio: 16 / 9; width:auto !important;} 
</style>
1 Like

Awesome! So easy, thanks so much, I will be definitely using this!

Hi for the second time today, @PixelGeek! :smiley: I’m trying to use your recommended method here, but I’m getting caught up on this piece:

What exactly is that referencing? Would I be able to do this using the background video workaround (where you host it on Webflow and use an embed to display it on the page) with this code here:

Here is my site Read-Only: LINK

Maybe this will work for you, I just set the video attribute to playsinline
Although this may affect how this video plays on iOS devices, so it’s better to check

<video id="bgvid" autoplay muted playsinline>
  <source src="https://uploads-ssl.webflow.com/642b35c606abde337de879f9/646e3f9a70a7d3bd2e95945d_IAW VHS Loading Video (1)-transcode.mp4" type="video/mp4">
</video>

<style>
#bgvid {

width: 100%;

</style>

If you also add loop somewhere in between autoplay muted playsinline, it will loop, otherwise it just plays once.

Also here is a javascript approach from someone how to stop the auto looping

1 Like

Thanks Dmitry! I’ll give this a shot. :+1:

1 Like

If you’re still struggling here’s the solution that worked for me:

<style>
 .bgvideo {aspect-ratio: 16 / 9; width:100% !important; height:100% !important;} 
</style>