How to correctly set the width and height of video in html5

Usually we set it up like this:

(Learning video sharing: html video tutorial)

But Sometimes it is found that the height of the video does not change after setting it. We can set the width and height of its parent element so that the video fills the parent element. Just add style="max-width:90%" to the video tag.

object-fit syntax

object-fit:fill | contain | cover | none | scale-down

object-fit value description

object-fit is mainly suitable for replacing elements, such as:

fill: This value is the default value of boject-fit. The size of the replacement content is set to fill the content box of the element, that is, the content of the element is expanded to completely Fills the container's outer dimensions, even if this breaks its intrinsic aspect ratio.

contain: Replace the element content size to maintain the aspect ratio to fill the element content container, whose specific object size is parsed to the width and height of a containing element. That is, if you set an explicit height and width on the replacement element, this value will cause the content to be sized exactly at the fixed ratio, but still within the element dimensions.

cover: Replace the element content size to maintain the aspect ratio to fill the element content container, and its specific object size is parsed to cover the width and height of the entire element. That is, the replacement element content size maintains the aspect ratio, but changes the width and height so that it completely covers the content element.

none: The replaced element content does not resize to fit the container of the inner element, the content completely ignores any height and weight set on the element, and still displays within the element dimensions.

scale-down: When the content size is set to non or contain, it will cause the specific object to become smaller.

Related recommendations: html5 tutorial

The above is the detailed content of How to correctly set the width and height of video in html5. For more information, please follow other related articles on the PHP Chinese website!