Hi all,
So I am using a background video and when I resize the browser, I don’t want it to ‘cut off’ the sides of the video.
Is there a way it can start to ‘shrink’ the video so it always fits centred?
Thanks,
Here is my site Read-Only: https://preview.webflow.com/preview/website-4bb32c?preview=33b9c13e2c0caf73e49493b0ffb80d77
Pages - G-Shock (Then scroll down a bit)
By essence, a background image or video is meant to fill a space entirely, hence being cropped left/right or top/bottom. Usually, when you want something to never be cropped, you’re using a simple image or an embedded video.
But I understand why you’re using bg video, it’s easy to bring to Webflow with the bg video component.
The background video is only following the behavior of its own “box”, or the one of its parent. So if you want the video to be always shown entirely, it can’t be depending of an element that’s, for example, 100% height or 100VH.
With the bg video element, it’s difficult to do because the element itself doesn’t know the ratio of the video. So basically, inside of your full screen section, you need to place a div that is always in 16/9th ratio (I assume your video has a HD format), that’s centered in height and 100% width.
Crafting such a 16/9th container is tricky but totally possible with CSS, in Webflow, without custom code.
I made a quick site to show how to make a square or any other specific ratio container (div).
This looks absolutely great. Thank you very much.
But I’m having a number of problems.
I think I have copied your layout correctly, I have then put my background video inside the div and its not even playing at the moment.
Can you see anything obvious I have done wrong?
https://preview.webflow.com/preview/website-4bb32c?preview=33b9c13e2c0caf73e49493b0ffb80d77
Pages - G-Shock (Then scroll down a bit) > video test 2
