IE9 errors

[davatron5000]

Someone posted a comment on my blog. My IE9 test environment is totally bjorked so I can't confirm or deny.

Causes bizarre errors for me in IE9 when using youtube's iframe embeds (though it really looks like a problem with their code, not fitvids directly). Claims "Math is not defined." May have something to do with the floating point dimensions and YT's iframe resize code.

Here's a fiddle:
http://jsfiddle.net/YnFsn/

Looking into it, but you may have more insight. Works like a charm with all other browsers: brilliant stuff.

[danny-englander]

I'm having the same issue with IE9. I've also filed in issue in the fitvids Drupal issue queue: http://drupal.org/node/1490368 I could add <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8, chrome=1"> to my page header but it's not ideal, it breaks any CSS3 for IE 9 that I had and I'd prefer not to have to do that.

[davatron5000]

Created a jsbin http://jsbin.com/ofeduk just to make sure the error wasn't apart of jsfiddle. Getting the same error. Giving futher documentation (aka "thinking aloud").

Various Errors

Do you want to debug this webpage?
...
Line: 4
Error: 'Math' is undefined

Clicking "Yes" to debug gets you the following information:

SCRIPT5009: 'Math' is undefined 
www-embed_core_module-vflka0yFS.js, line 4 character 120

Clicking "No" results in a similar:

Do you want to debug this webpage?
...
Line: 41
Error: 'yt' is undefined

Clicking "Yes" to debug gets a similar error:

SCRIPT5009: 'yt' is undefined 
WyQYGAWm_r4?rel=0, line 41 character 5

Clicking "No" and ignoring all errors from this screen results in the page loading as expected.

Changing the Video Vendor to Vimeo

Changing the video vendor to Vimeo http://jsbin.com/ofeduk/2 results in a similar error set:

Line: 10
Error: 'Object' is undefined

and

Line: 1
Error: 'Player' is undefined

No FitVids

http://jsbin.com/ofeduk/4 - No fitVids. Works just fine (as expected)

Initial conclusions

It appears this is a problem with how IE9 is interaction with either jQuery or the differing iFrames. I found a thread on the MSDN that claims:

... you are still using jQuery 1.4.2 (search for MSIE in jQuery.js) which is browser sniffing and does not know about IE9's UAS

which is not the case for us since we're using jQuery latest.

A stackoverflow results says it could be a missing semi-colon. But that would mean IE9 would have problems with most minifiers, etc.

http://jsbin.com/ofeduk/6 - A cleaned up and fully semi-colon'd version that still has problems. Frankly, I'm stumped at this point but will continue to investigate.

[davatron5000]

http://bugs.jquery.com/ticket/8533#comment:5 - Here's our answer. IE9 doesn't allow iFrames to be .wrap()'d by jQuery because it's removed from the DOM and is thus a "memory leak".

Looks like removing our dependency on .wrap() is the first step.

[danny-englander]

@davatron5000 thanks for all your work on this so far in such a short amount of time, I really appreciate it. Fascinating revelations.

[davatron5000]

I've got a preliminary fix: http://jsbin.com/ofeduk/11

There's still some work to be done. It's super ugly, relatively untested, and not based off the latest version of FitVids.js, but here's the gist:

// Insert a div before the video so we can avoid using .wrap();
$this.before('<div class="fluid-width-video-wrapper">');

// Insert our ratio based resizing
$this.prev('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%");

// Remove hardcoded attrs
$this.removeAttr('height').removeAttr('width');

// Stuff a clone into wrapper so that we can trick IE9 into thinking 
// into thinking it still has access to the iFrame's JavaScript and DOM APIs.
// Based off http://stackoverflow.com/a/9760842/1040649
$this.clone().appendTo('.fluid-width-video-wrapper');

// hide()/display:none the original video
$this.css('display','none');

The only problems I have with this is that creates 2 nodes of every video, just one is hidden. 😢 The only other fix, as mentioned above, is to force IE into IE8 compat mode <meta http-equiv=“X-UA-Compatible” content=“IE=8” />, but that solution is unacceptable to me and moving the web forward.

[danny-englander]

I just tested your fix on my Drupal 7 site and it seems to work fine now with IE 9. I think this is the lesser of all evils here so I'll go with this for now, it will make my client happy. Many thanks!!

[danny-englander]

Oh darn, it looks like there is an issue when you have two different videos on one page:

corrected links:

http://jsbin.com/imojoh/7
http://jsbin.com/imojoh/7/edit

...the second video disappears and the first gets rendered twice.

[davatron5000]

http://jsbin.com/imojoh/8 Ok. Gotta fix. we have to .appendTo($this.prev('.fluid-width-video-wrapper')); not just stuff the clone into all of them.

$this.before('<div class="fluid-width-video-wrapper"/>');
$this.removeAttr('height').removeAttr('width');
$this.prev('.fluid-width-video-wrapper').css({ 'padding-top': (aspectRatio * 100)+"%" });
$this.clone().appendTo($this.prev('.fluid-width-video-wrapper'));
$this.hide();

I was also having trouble with your new video embed, so I put another one in there for ya 😉

[danny-englander]

Ok thanks, yes this fixes it now when there's more than one video on the same page.

[icd2k3]

Is there a version of Fitvids with this fix? I'm using the Vimeo player and in IE9 I still get the errors:

Line: 11
Error: 'Object' is undefined

[davatron5000]

Same error. There's not an official version with a fix yet. I filed a bug with Microsoft's IE9 team, hopefully they'll take notice, but I doubt it'll move very fast. I really don't like the clone() & hide() solution at the moment, but it might be our only option.

[danny-englander]

@icd2k3 if you go to: http://jsbin.com/imojoh/7/edit#javascript,html,live you can grab the code there between the JQuery tags. That worked for me though I am not positive you are having the same issue.

[icd2k3]

I wasn't able to get that temporary fix working either... where is it supposed to go within the fitvids code? As long as I can get that temp fix working for now should be good to go.

Thanks for the script btw!

[icd2k3]

@highrockmedia @davatron5000 got it! thanks for working on the issue.

[icd2k3]

Actually I'm noticing this script is adding an extra iframe player. So now I have 1 player within the fluid-width-video-wrapper div (visible) and 1 player outside of that div (invisible)

Both auto-play and when I pause the visible one I can still hear the invisible one playing. Using the official fitvids.js only shows 1 iframe player.

[davatron5000]

That's the only solution at this point for IE9. If IE9 users have clicked "Don't show me errors" like this at any point in their life, it actually plays, loads, and responds fine. It's just when the debugger is on that it does this (apparently).

Spoke with a Microsoft IE9 Team guy, they're looking at it.

[enepomnyaschih]

Hi davatron5000

I've run into similar issue trying to embed YouTube video player into my site. Could you share a link of your bug report for Microsoft IE9 team so I could vote and track it?

[jasonivers]

What a ridiculously annoying bug... what's even worse is that it seems to work properly sometimes. It was working for me the first time I visited my page, but if I reloaded, it started throwing errors, and each time I reloaded, it got progressively worse. If I force closed IE (i.e. "End Process"), then cleared the cache, then loaded the page again it would again work... once. Reloads would again cause the problem. I spent hours trying to figure out what was wrong with IE 9 and caching.

In trying to solve that problem, I found that if I did things to force fitvids to not cache, it would immediately proceed to the worst JS bugs, rather than being progressive. This makes even less sense, if possible... if I leave the JS file where it can be cached, but clear the cache, it works one time (which one would think would mean that caching it is causing the problem). If I keep the file from being cached at all, it works zero times.

Talk about a hard bug to figure out... Thank you for the fix above, davatron. It made it work properly on my site.

[keeran]

Cool fix, be aware that if you have multiple videos on the page, the $this.clone().appendTo('.fluid-width-video-wrapper'); will apply to all of them, duplicating the last video across all instances.

[katowulf]

Any plants to get this fix into the main project? I just downloaded and ran smack dab into this on my first attempt at implementing.

[stephencarr]

For anyone interested; I've forked this plugin to make it compatible with IE9:

https://github.com/stephencarr/FitVids.js/tree/fitvids-ie

[davatron5000]

Recommendation: Update jQuery. It appears this issue was fixed in jQuery and landed ~v1.9 http://bugs.jquery.com/ticket/12266

I'm currently unable to trigger this error in the example above that triggered the error, even in IE7 compat mode (cf. #69). I'm going to make this as resolved unless this error keeps appearing for people with a modern version of jQuery.