The video tag will not automatically fill the entire div, even if it is set to a height of 100%; so when the video tag needs to fill the entire div, you can add the ‘object-fit:fill’ style to the video tag, so that That’s it!
<div class=”videoContent”>
<video class=”videoElement” controls preload=”auto” width=”100%” height=”100%”></video>
</div>
.videoContent{
background-color: rgb(40, 46, 83);
width: 600px;
height: 420px;
}
.videoElement{
object-fit: fill;
}
The object-fit attribute specifies how the content of the element should fit into the height and width of the specified container.
Object-fit is generally used for img and video tags. Generally, these elements can be cut, scaled or directly stretched to retain the original proportion.
fill: By default, the original ratio is not guaranteed, and the content stretches to fill the entire content container.
…
The post video Tab Styling Full Screen first appeared on Lenix Blog .
This article is reprinted from https://blog.p2hp.com/archives/9796
This site is for inclusion only, and the copyright belongs to the original author.