Usage of video tag in Html5: How to automatically fill the parent div tag

This article introduces to you the usage of the video tag in Html5: how to automatically fill in the parent div tag. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

If you want the video to automatically fill the size of the slow parent div, just add style="width= 100%; height=100%; object-fit: fill" to the video tag.

object-fit syntax

The syntax of the object-fit attribute is very simple:

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

object-fit value description

object-fit is mainly suitable for For replacing elements, such as: <video>, <object>, <img>, <input type="image" >, <svg>, <svg:image>, and <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 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, 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 content of the replaced element 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's dimensions.

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

Related recommendations:

Example codes for div tags in HTML5

##What are the tags and common rules in HTML5? Introduction to html5 tags and rules

The above is the detailed content of Usage of video tag in Html5: How to automatically fill the parent div tag. For more information, please follow other related articles on the PHP Chinese website!