Menu
Can you make a video "stretch" to the width & height of the video element? Apparentlyby default, video gets scaled & fitted inside the video element, proportionally.
thanks
286
Just setting width and height to 100% on videoInsert did the trick. No need for object-fit or display .
<video>: The Video Embed element. The <video> HTML element embeds a media player which supports video playback into the document.
I have tested by using object-fit: fill in CSS
Works good.
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.
198
From the spec for <video>:
Video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.
There are no provisions for stretching the video instead of letterboxing it. This is likely because stretching gives a very bad user experience, and most of the time is not what is intended. Images are stretched to fit by default, and because of that, you see lots of images which are badly distorted online, most likely due to a simple mistake in specifying the height and width.
You can achieve a stretched effect using CSS 3 transforms, though those aren't fully standardized or implemented in all browsers yet, and the ones in which it is implemented, you need to use a vendor prefix such as -webkit- or -moz-. Here's an example:
<!DOCTYPE html> <style> video { -webkit-transform: scaleX(2); -moz-transform: scaleX(2); } </style> <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv"></video> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
