mediaelement.js video doesn't play in IE8

Question

I've looked through all the other questions posed here, and nothing has really solved my problem.

At present the video will load and play in Chrome, Safari, FF, and IE9, but NOT IE8 which is the last browser I need to support. You can view the page here.

I have been trying to use the Debug option, but not getting any help from that either. Here is what the debugger is telling me:

Initializing...
stage: 0x560
file: path/to/video.mp4
autoplay:true
preload:true
isvideo:true
smoothing:false
timerrate:250
displayState:true
ExternalInterface.available:true
ExternalInterface.objectID: me_flash_0
Adding callbacks...
Success...
METADATA RECEIVED:900x560
positioning video
seek:0
play

Here is my code:

<video id="player1" width="900" height="560" loop="true" autoplay="true" preload="none" >
  <source type="video/mp4" src="<?php echo get_template_directory_uri(); ?>/images/curtainLoop.mp4" />
  <source type="video/webm" src="<?php echo get_template_directory_uri(); ?>/images/curtainLoop.webm" />
    <object width="900" height="560" type="application/x-shockwave-flash" data="<?php echo get_template_directory_uri(); ?>/js/flashmediaelement.swf"> 
        <param name="movie" value="<?php echo get_template_directory_uri(); ?>/js/flashmediaelement.swf" /> 
        <param name="flashvars" value="autoplay=true&amp;controls=true&amp;file=<?php echo get_template_directory_uri(); ?>/images/echo-hereweare.mp4" />                       
    </object></video>

<span id="player1-mode"></span>
 <script>
    jQuery(document).ready(function($) {
    var player = new MediaElementPlayer('#player1', {
        enablePluginDebug: true,
        enableAutosize: true,
        success: function(media, node, player) {  
            $('#' + node.id + '-mode').html('mode: ' + player.pluginType);  
        }  
        });
    });
</script>

following with the MediaElement website, I added the span to output the mode, which is returning as "undefined" instead of either "native" or "flash". Not sure if this is the problem, but at this point I just don't know where to look.

Any help is greatly appreciated.

Answer 1

I've had this problem before and it took a while to find out what causes it. I've tested this out and it seems to work in your case as well:

On the .me-plugin div that MediaElement creates, there's a position: absolute; reference in the CSS. When I set it to position:static; All is well in IE8.

I usually end up doing this:

.ie8 .me-plugin { position: static; }