Video not getting the full height
Hello, I have a video that needs to cover the full size of its parent but it is not happening and I don't understand why. Is there a CSS property that I can use to achieve that?
11 Replies
Did you remove all default margin and padding?
All widths and heights that I can see are at 100%, but some container at an outer level beyond what is shown here may have a fixed height that this parent is matching. That can give the parent a different aspect ratio from the video.
Thank you @chooking I carefully checked for the parents but I can't see a fixed height, I will try removing the margin and paddings and see what results I got
https://codepen.io/vince1444/pen/XWobxrZ
tl;dr: add display: flex
Not sure why this works, I guess the way flexbox calculates width/height
@jgcastro if that hasn't fixed it try throwing a
display: block; on there
i feel you'd really only want to add a flex display to something that you'd utilize flex with?This, forgot about this honestly π
no worries, most annoying thing about css is there's so much you forget half of it π
Thank you all so much for your help, adding display: flex solve the issue but I am still not understand why π€
i'd recommend
display: block; not display: flex;. You'd only want to use flex primarily for something you are utilizing flex with such as putting elements into rows etc etc. It works because an image element is initially display: inline; allowing other elements to sit next to it if there's space, this display property puts a gap underneath because it has a descender which is a small gap usually underneath text which reserves space for lower case characters such as g to hook under the line the text is on. display: block; takes away the descender.oh wow now that make sense, thank you for the explanation. I tried display: block but did not work so I keep it with display: flex
yeah no worries, glad it helped. alrighty.
You have two options: either set position absolute on the video and position relative on its parent, or you need to explicitly set a fixed height (in px or vh) on the parent so that the video knows height of what 100% is. There is one more hack to achieve this by using 'aspect-ratio' property instead of height on the parent and 'height:100%' on the video.