Streaming live at 10am (PST)

Background video getting cut-off/cropped


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

Any help would be VERY appreciated.

Here is my site Read-Only: LINK

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: There’s a square example and a — convenient — 16/9th one.

Thanks @vincent - I actually saw your page and tried implementing that first without luck. I’ll try it again and see if I can get it work.

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

Hey Vincent,

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.

I would appreciate any insight.

Thanks Graham