fill alternative like background-size cover

[Metis77]

What about this for your great collection:

/* merge with above css */
.parent-element-to-video {
    position: relative; /* or absolute or fixed */
}
video {
    position: absolute;
    left: 50%; /* % of surrounding element */
    top: 50%;
    transform: translate(-50%, -50%); /* % of current element */
}

source excample: http://stackoverflow.com/questions/10797632/simulate-background-sizecover-on-video-or-img

this is a great alternative for backgrond-size: cover; for any html elements like img, video, or just a div.
works great cross all browsers since ie9+

[davidtheclark]

That looks a lot like http://davidtheclark.github.io/scut/center-transform.html

So maybe it's already taken care of?

I do not understand, though, how this is a substitute for background-size: cover, because I don't think any of those rules would ensure the video is at least as wide and at least as tall as the container. Is this the answer you're referring to? If so, you should have min-height and min-width in there, right?

[Metis77]

You are right.
min-height and min-width are doing the stretching.

I saw your center transform solution.
But I was thinking of an addition to you fill mixin: https://davidtheclark.github.io/scut/fill.html

I see all the JS full screen bg video or img solutions in the templates I use, that are not really needed, as this CSS only is working perfectly.

[davidtheclark]

Ok. Interesting idea. Open to a PR, or I might have some time to do it myself in a little while.

[jonscottclark]

@Metis77 I've run into this requirement many times and we've currently settled on using the approach described in this post: https://medium.com/@primozcigler/neat-trick-for-css-object-fit-fallback-on-edge-and-other-browsers-afbc53bbb2c3#.niso225ja

Basically, object-fit: cover with a JS fallback to change the img to a background image with background-size: cover if the browser doesn't support object-fit. It's simple and while it relies on JS to work, it provides the most consistent display.

[jonscottclark]

I'll add that this requirement can vary in lots of ways and I'm not sure that recommending one approach vs. any other is something that this library should take on as a responsibility.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.