Cufon causing VideoJS to load a minuscule player in Internet Explorer
I've just battled for some time to resolve an issue I was seeing on one of our sites where, in Internet Explorer 6 through 8, Flash fallback videos (using Flowplayer) were loading up only about 3 pixels high and 4 pixels across, a tad smaller than intended.
The first thing to note is that both Cufon and VideoJs are quite particular about being loaded in the head of the page. For Cufon, this is to allow replacement of the text before it's displayed and for VideoJs this is to allow it to do something analogous to Remy Sharp's html5 shiv (but only for the video tag).
The VideoJs embed code looks something like this:
<!-- Begin VideoJS -->
<div class="video-js-box">
<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->
<video class="video-js" width="640" height="264" controls preload poster="http://video-js.zencoder.com/oceans-clip.png">
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg; codecs="theora, vorbis"' />
<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
SNIP - object tag
</video>
<!-- Download links provided for devices that can't play video in the browser. -->
<p class="vjs-no-video"><strong>Download Video:</strong>
MP4,
WebM,
Ogg<br>
<!-- Support VideoJS by keeping this link. -->
HTML5 Video Player by VideoJS
</p>
</div>
<!-- End VideoJS -->Edit: It seems that a browser somehow manages to embed an object even if it is converted to entities and sat inside pre tags. Not sure if it's posterous' fault or mine.
Edit again: It is posterous' fault. It is doing naughty things with entities within pre tags.
Note that the <object> we wish to fallback to is inside the <video> tag, something IE doesn't ordinarily recognise.
Strangely, if I put a delay on the "VideoJS.setupAllWhenReady();" call that actually runs through all the items on the page, everything is fine. Similarly, if I just remove the video tag and let the object embed itself, all is well. This excluded Flowplayer as the culprit.
In desperation, I tried removing a whole load of other javascript from my pages, and getting rid of Cufon brought things under control. After a lot of messing around I spotted in IE8's developer tools that the video tag was getting a size of 0x0. This in turn seemed to be making the object inside it extremely small. Remembering that the shiv was there specifically to stop this, it occurred to me that this could be where the conflict was. After all, the shiv is the only part of videojs that needs to be in the head with Cufon.
Pushing videojs down to the end of the body i.e. bypassing the shiv entirely, miraculously fixed the issue. I guess because IE now decides to render it as an inline element and it therefore no longer has an effect over the size of the object tag within it.
For once, ignoring the advice of the person who developed the software in the first place would have worked out after all.