Can we create something like Object-fit: fill in Javascript/Jquery

Question

I'm using object-fit for video. I saw isn't working in IE and some other browsers. Is it possible to create something like Object-fit: fill works with Javascript/Jquery?

Answer 1

Yes, of course, you can do that.

Include the polyfill in your markup

<script src="path/to/object-fit-videos/dist/object-fit-videos.min.js"></script>

Add a special font-family CSS property for targeting IE/Edge or Safari

video {
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

object-position can be used similarly. Note that object-position only supports keyword positioning at this time. That's top, bottom, left, right, and center

video {
  object-fit: cover;
  object-position: left top;
  font-family: 'object-fit: cover; object-position: left top;';
}

Make the JavaScript call to initialize the videos with the special CSS property

objectFitVideos();

You can make the call before the closing tag or whenever the DOM is ready. The polyfill will do the rest.

Also, you may find additional detail from https://github.com/TricomB2B/object-fit-videos