I have a video, and I want it to FILL 100% of the width, and 100% of the height. And keep the aspect ratio.
Is it possible that it at least fills 100% for both? And if a bit of the video has to be out of the screen to keep the aspect ratio, that doesn't matter.
HTML:
<video preload="auto" class="videot" id="videot" height="100%" preload>
<source src="BESTANDEN/video/tible.mp4" type="video/mp4" >
<object data="BESTANDEN/video/tible.mp4" height="1080">
<param name="wmode" value="transparent">
<param name="autoplay" value="false" >
<param name="loop" value="false" >
</object>
CSS:
.videof, .videot {
width: 100% !important;
height: 100% !important;
}
By checking other answers, I used object-fit in CSS:
video {
object-fit: fill;
}
From MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):
The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
Value: fill
The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.