I added 100% to width and height and the height worked, but the width didn’t work.
Section1 is the parent container of video, and when I take off the 300px in height, it covers the full container but the height is too long.
It sounds like the video element is enforcing an aspect ratio, probably based on the ratio of the underlying video file.
You should be able to distort it by telling the video element to object-fit: cover, but… do you really want it to?
1 Like
So you can’t add height or width to parent container if you want the video to fill the container?
Percentage heights are based on the height of the parent element.
If the parent element (.Section1) had no height defined, you can’t have a percentage of an undefined dimension. It will not work.
1 Like
If you’re just trying to make the thing fill the space… make the container black-backgrounded?
If the video is 1600x400 (4:1), and you tell it to be 600 pixels high and 3000 pixels wide (5:1)… it’s not the same ratio anymore… so… what do you expect it to do in that case? Make the video stretch and look distorted horizontally? Cut off the top and bottom of the picture to make it fit the width?
1 Like
I don’t think you grasped the point that @m_hutley was making and videos have intrinsic aspect ratios. They only work at the aspect ratio they were designed for. If you stretch one dimension and not the other then the video would be distorted. Width and height have to be changed uniformly in order to maintain the correct aspect ratio.
The only way to fill a container that is not the same aspect ratio as the video is to use object-fit:cover as mentioned and then the video will fill the dimensions specified but there will be cropping on one or other dimensions.
Have a look at this article.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.