Does this also work with videos?

[eoctavien]

I was able to download the master file and run it in visual studio. However I have a video (via HTML5 video tag) that uses object-fit (and I need it to work in Internet Explorer). Does anyone know if it is just for images or can I apply it to videos as well?

[anselmh]

Have you tried to use it with video and encountered a problem or didn’t tried it? In general it should also work with video although I never explicitely tested it with it.

[eoctavien]

I have tried and it seems to not be working. I referenced both the css and js files. I have a video selector and I have my object fit property is set to fill, but I do not see the changes when I run it in IE11 (video letterboxes instead of filling). I am using ASP.Net web forms and my referenced files/the script are in the master page while the actual video element is in a content page if that helps at all... Perhaps I am missing a step? Any help or suggestions would be greatly appreciated.

[eoctavien]

Here is some trivial code to better illustrate:

//////////////////On Master Page//////////////////////////
!DOCTYPE html
html xmlns="http://www.w3.org/1999/xhtml"
head runat="server"
titleWeb Project/title
meta http-equiv="X-UA-Compatible" content="IE=Edge" /
link href="Content/bootstrap.css" rel="stylesheet" /
script src="Scripts/jquery-2.1.3.min.js"``/script
link rel="stylesheet" href="../dist/polyfill.object-fit.css" /
style
video {
width: 100%;
height: 800px;
object-fit: fill;
}
/style
/head
body
Content Page Placeholder
/Content Page Placeholder
/body

//////////////////On Content Page//////////////////////////

div style="height:800px; width:100%;"
video id="video" autoplay="autoplay" loop="loop" preload="metadata" poster=""
video
/div

script src="../dist/polyfill.object-fit.js"``/script
script
// Call polyfill to fit in images
document.addEventListener('DOMContentLoaded', function () {
objectFit.polyfill({
selector: 'video',
fittype: 'fill',
disableCrossDomain: 'true'
});
});
/script

[anselmh]

Thanks. I’ve reconstructed the case partly successful in a non-supporting Firefox version. Does it work if you resize the window after the polyfill has initialized? In my case the resize event triggered the polyfill to work properly. If IE does the same, that narrows down the issue.

[eoctavien]

It does not seem to work when I resize. Also, In my code, I should have wrote disableCrossDomain: 'false' instead of true. I am thinking it might just be the way I set this up. I'm not really sure, perhaps I am not referencing something correctly... Are you able to replicate the issue on IE11 at all using the code above?

[anselmh]

There are other reports now regarding this issue:

As the title states, this does not work with videos with Microsoft's new browser on Windows 10 Build 10130.

[cosmix]

Apologies, but it did not seem like a duplicate. My bug was specifically about Spartan/Edge and a recent release thereof. The polyfill seems to work well with IE11 in our case, hence I thought I'd file the more specific bug which described a situation whereby, most certainly, the polyfill does not seem to work at the moment.

[anselmh]

Wait, so video works well i IE11 with video but not in Spartan?

[cosmix]

It seems to be working ok on IE 11 (11.0.10011.0), but not on Spartan/Edge yeah – both as found in Windows 10 Insider Preview Build 10130.

[anselmh]

Ah, that is very interesting now and actually quite frightening as in MS Edge there’s no reliable way to UA detect it. I’ll try to figure out what’s going on there. Do images work at least in there, @cosmix?

[cosmix]

I think you can detect Edge by looking for the "Edge/12.0" at the end of the UA string.

Sorry I haven't tried images just yet --- I don't typically use Windows machines and I very infrequently use a VM for testing. I'll give it a try and let you know, however, the next time I get to use that Win10 IP VM. Given the state of Edge I expect it to have several regressions/issues that will be fixed before the final rolls out later this summer.

[anselmh]

Hey, I re-traced the problem and it works fine in browsers here except for the following caveats:

• No browser passes autoplay attribute through JavaScript and exectues it. So you can’t autoplay videos using just the autplay attribute. Instead you’d need to use a complete JavaScript video player which might work better in that case.
• MS Edge support is currently completely broken. See Not working in Microsoft Edge #45 for more info.

I’m therefore closing this issue now.