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

The content of this article is about how to set the width and height of the video tag in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Generally:

<video width="320" height="240" controls="controls">

But sometimes it is found that the height of the video has not changed after setting it. We can set the width and height of its parent element to fill the video parent element. Just add style="width= 100%; height=100%; object-fit: fill" to the video tag.

object-fit syntax

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

object-fit take Value description

object-fit is mainly suitable for replacing elements, such as: <video></video>, <object></object>, <img alt="How to set the width and height of the video in the video tag in html5" >, <code><input type="image">, <svg></svg>, <image></image> and &lt ;svg:video>etc. Its default value is fill. The description of the object-fill value is as follows:

• fill: This value is the default value of boject-fit. The size of the replacement content is set to the content box of the filling element, that is, The element's content expands to completely fill 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, and its specific object size is parsed as 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 remains within the element Shown within dimensions.

• scale-down: When the content size is set to non or contain, the specific object will become larger. Small.

Recommended related articles:

PostMessage in HTML5 implements cross-domain code analysis

video in HTML5 ( Analysis of video) elements

Analysis of audio (audio) in html5

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