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.
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.
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
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:
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