Fitting Video Into a Div Across Browsers

[ruby76]

I’m trying to fit a video into a div that’s 100% wide and only 90% tall. I’ve got some code that does a good job of keeping that 90% height (“cropping” the right/left edges) as I resize – the only problem is that in Chrome, it doesn’t also crop the video’s height as I reach my full screen resolution of 1980×1080. It seems to want to keep the aspect ratio (despite the use of “object-fit: cover”) and just fills the whole browser screen. In Firefox, though, it looks great.

Code is here: https://codepen.io/ruby76/pen/mMLoVv
(I’m still working on optimizing the video file size/load time – apologies if it takes a bit)

If I remove the video source tags so the background image shows instead, that fits neatly within the 90% height (background-size: cover). Does Chrome handle the “object-fit” property differently than Firefox, and is there any way around it to make it play nice across both?

Of course Safari and IE aren’t even wanting to crop the right/left; I haven’t wrapped my head around what to do there yet, but would appreciate input there as well.

If it helps, the actual live site I’m trying to fit it into is at broadcastapartments.com. The client would like the video to fit in the space that the header image occupies now.

Thanks in advance for your time/help!

[Timothy Smith]

Seems like you may be running into a simple aspect ratio problem.

You may play with ‘overflow: hidden’ and let the spill off to the sides.

Just a thought

[ruby76]

It definitely seems related to the aspect ratio, but I thought since the video could be contained width-wise (with that ‘object-fit: cover’), rather than resizing along with the window like it normally would, it could also fit into a set height. Maybe not?

I removed the overflow: hidden part since that actually doesn’t seem to be necessary. It still looks fine in Firefox with/without that, but then spills over at the bottom in Chrome regardless. Any idea why Chrome handles it differently?

[Author]

Posts