I’m trying to figure out how to reliably get my background video element to show the entire video. I’ve tried to set the containing div to be 16:9 by sizing it around the VW. For some reason, no matter what I try, the video is always ‘zoomed’ in / cropped looking and I can’t get my text in the video to show up reliably.
I’m just trying to get this to work on Desktop and maybe Tablet and I couldn’t even get this to work setting a fixed pixel size at 16:9
Well the behavior currently is normal, a bg video is a bg before everything else, so it’s meant to fill the element it’s in, and it’s also meant to have a foreground. Wehn you want to actually “show” a video, you’re supposed to use a video element.
However there are many reasons why you’d want to have a bg video in an element that you control the ratio of, to show the entire video.
There’s a neat CSS rule that is allowing you to craft containers of a certain ratio, and they can grow or shrink but they keep their ratio. So if you set their width in % or Vx, their height will grow or shrink depending on it.
I made a quick demo site for this property: http://css-square.webflow.io/ There’s a square example and a — convenient — 16/9th one.
@vincent would you be willing to share a cloneable version of that example site? I want to just drop my video in to see if it will work in your example.
I guess what I really don’t understand is that even if I set the WxH in Pixels in a 16:9 ratio (using 940x528) for example. The video still doesn’t ‘fill’ the div correctly - it’s cropped.
This might really help me out, I have a situation where a client requires a background video to be contained, so placing it in a scalable ratio container might be perfect.
Just out of curiosity, how to you work out the ratios? If the client ends up supplying a video (or a future client) that isn’t 16:9 how do I work out the bottom padding.