cee-chen/object-fit-polyfill

Enable on dinamically created video tag

microcipcip opened this issue · 4 comments

microcipcip commented

Hi, is it possible to make this polyfill work with dinamically created video elements?
So that I can do something like this:

// Append video to the DOM
$video.html(videoHTML);

// run polyfill again
objectFitPolyfill();
cee-chen commented

Yes, you can do this! The source code is doing it right here: https://github.com/constancecchen/object-fit-polyfill/blob/master/src/objectFitPolyfill.js#L248

Note that you will need to use the non-basic js file to get public/global access to the function. I would also recommend checking for its existence, as the function will return a "doesn't exist" error on browsers that already support object-fit. Quick example:

if (typeof objectFitPolyfill === 'function') {
  objectFitPolyfill();
}
microcipcip commented

Thanks a lot, it works great!
Do you know if there's a fix to the controls going off canvas on IE11? I guess I will have to add custom play/pause buttons?

cee-chen commented

No idea about that, sorry! Browser-specific handling of <video> controls is outside the scope of this polyfill. :( In general, object-fit for videos is probably also more suited to background videos rather than media where aspect ratio and the UI controls matter. Custom play/pause buttons do sound like they would work however!

microcipcip commented

Ok, thanks for your reply :) You are right that this polyfill is a best fit for background videos