Video tag object-fit alternative

Asked Feb 15 '19 at 03:30

Active Feb 15 '19 at 10:22

Viewed 196 times

I need to implement a video, which it fills up the container. It is required to use pure CSS, instead of using Javascript.

I have browsed through the internet, and I concluded that there are 2 pure-CSS approaches to this problem, but they still have their own flaws.

min-height and transform: Using this is the worst solution so far, since the video will expand to its original width and height. And if the container is much smaller than the video, the display is kinda weird.
object-fit: This seems the best solution up to date, but... IE doesn't support (still this classic problem).

Is there an efficient and cross-browser ways (even workaround, hacks, etc.) on using only CSS. Any help is appreciated!

Here is my codepen to summarize my problem as well.

edited Feb 15 '19 at 10:22

asked Feb 15 '19 at 03:30

Tyler Bean

This might help: https://stackoverflow.com/questions/37792720/ie-and-edge-fix-for-object-fit-cover – maazadeeb Feb 15 '19 at 03:43
Thanks, but it's still the same as what I have written above. :D – Tyler Bean Feb 15 '19 at 03:49

0 Answers0