search

cee-chen / object-fit-polyfill

A Javascript polyfill for browsers that don't support the object-fit CSS property.
ISC License
497 stars 93 forks source link

data-object-fit="fill" for video in Edge #53

Open bartbutenaers opened 5 years ago

bartbutenaers commented 5 years ago

Dear Constance (@constancecchen),

Thank you for sharing this nice polyfill with the community!!

It works fine, except to "fill" a video element in Edge. I have described it here, but I hadn't seen that issue was about "cover" (which works fine).

Would be nice if you could have a look at this.
Thanks in advance! Bart

cee-chen commented 3 years ago

Hey hey, I'm super super sorry y'all (especially for the very slow response). I can definitely reproduce the issue you're seeing (even on modern browsers) by trying to set a video to 100% of any container's random width and height. Unfortunately, I think this is a limitation of the video element itself:

http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

[...] in the same way as the img element — if you only set one of width and height, the other dimension is automatically adjusted appropriately so that the video retains its aspect ratio. However — unlike the img element — if you set width and height to something that doesn't match the aspect ratio of the video, the video is not stretched to fill the box. Instead, the video retains the correct aspect ratio and is letterboxed inside the video element. The video will be rendered as large as possible inside the video element while retaining the aspect ratio.

The plugin relies on manually setting width and height properties on the element, and I can't reasonably think of any (reliable and non-janky) workarounds to this. I experimented with setting width and height to 1px by 1px and manipulating transform: scale to the size of the container, but that acts super oddly as well and the video still doesn't quite fill the container 😬

This might have to be a known issue with the video tag for now, unless someone can think of a workaround to this - definitely will leave this issue open in case someone does!