Streaming live at 10am (PST)

Scale video element by its height?

I understand the video element is scaled by width but…
Is there a way / work around to scaling a video by its / its parent DIVs height?

I have a design in mind that relies on this functionality (or at least I can’t think of another solution)
(also can’t use the background video as it does not suit this purpose for a few reasons)


If you set something fit by height you get “crop” effect for the width (Example: The video is1920X1020 - you can not put this video inside “300hx600w” card - without “crop” overflow:hidden - effect).

Try this two Q - than add more detials (Example, Reference, this is youtube or video file?)

This is not video specific issue (The same tricks for will work for images).


Also you find solutions by JS (Easier to work with background to fill up divs):

But for images you can use background image and select contain (instead of cover), also if I just drop an image into a div it would not crop it.