Black overlay showing up on top of html5 video in ie9

Question

So IE strikes again. I'm having a ridiculously hard time trying to figure out why IE is making a black screen show up on top of the video. I have a button on a web page that brings up a black div that fills the whole screen and inside the div is the video, along with a close button on the top right. The video works perfectly on all browsers, including IE9 itself. The real problem is that when I push the button that makes the div appear, it shows up all black, just like the div's background. However if I right click on the center where the video should appear and press the play option, it will begin to play and the video works fine. Yes, the video has a poster image and the controls appear on every browser, but on IE9, the controls and poster do not appear and the video screen is all black. The video even pops up when I go into the developer tools in IE9. I am simply baffled as to what kind of glitch is causing this. I even reset IE's internet options (since I work at a firm and the browsers are slightly regulated here) and nothing worked. I'm starting to think IE9 has a bad rendering issue, but idk.... here's the code:

$(window).load(function() {
  $("#show-video").click(function() {
    $("#presentation").css("display","block");
  });
  $("#close").click(function() {
    $("#presentation").css("display","none"); 
  });
});

.title {
    background:
        url('http://www.sasllpcpa.com/images/sas-consulting-doctor.png') no-repeat bottom right,
        url('http://www.sasllpcpa.com/images/squared-metal.png') repeat;
    padding-top:25px;
    padding-bottom:25px;
    border-top:3px solid #111;
}

    .title h1 {
        font-size:4.32rem;
        color:#005287;
        font-family:'Open Sans', 'Droid Sans', sans-serif;
        font-weigt:700;
        margin:0;
    }

    .title h2 {
        font-size:1.529rem;
        color:#111;
        margin-top:20px;
        font-style:italic;
    }

    .title .row > a {
        display:inline-block;
        padding:8px;
        background:#FFF;
        border-radius:5px;
        color:#005287;
        margin-top:100px;
        overflow:hidden;
    }

    .video-button {
        display:inline-block;
    }

    img.video-button {
        width:32px;
        border-radius:0;
        margin-right:10px;
        vertical-align: middle;
    }

    div.video-button { /* video icon */
        font-family:'Droid Sans', 'Arial', sans-serif;
        font-size:0.8823rem;
        font-weight:700;
        margin-top:2px;
    }

    #presentation { /* pop-up box for the video */
        position:fixed;
        background:#000;
        top:0;
        left:0;
        color:#FFF;
        width:100%;
        height:100%;
        z-index:1001;
        display:none;
    }

    #close {
        color:#FFF;
        font-family:'Droid Sans', 'Arial', sans-serif;
        font-weight:700;
        font-size:1.3rem;
        background:#CC0000 ;
        width:40px;
        text-align: center;
        position:absolute;
        top:0;
        right:0;
    }

    .video-container {
        position:relative;
        top:10%;
        margin:auto;
        width:100%;
        height:100%;
        max-height:480px;
        max-width:640px;  
    }

    .title video {
        max-width:100%;
        height:100%;
        
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<section class="title">
        <div class="row">
            <h1>SAS Consulting <br>Services, LLC</h1>
            <h2>...your dedicated healthcare trusted advisors!</h2>
            <a id="show-video" href="#presentation">
                    <img class="video-button" src="http://www.sasllpcpa.com/images/icons/video.png" alt="video"/>
                    <div class="video-button">About SAS Consulting</div>
            </a>
        </div>
        <div id="presentation">
            <a id="close" href="#">X</a>
            <div class="video-container">
                <video id="webVideo" poster="http://www.sasllpcpa.com/images/presentation-poster.png" controls="controls">
                    <source src="http://www.sasllpcpa.com/videos/about-sas-consulting-services.mp4">
                    <source src="http://www.sasllpcpa.com/videos/About_SAS_Consulting_Services.ogv">
                    Your web browser does not support HTML5 Video.
                </video>
            </div>
        </div>
    </section>

(you can copy the code above on a jsfiddle, I already set it up using images and video for review [sorry if it looks a little messy, I was in a hurry]). Anyways, like I said, it works on all browsers but IE9 shows a black screen unless you right click and press play in the center of the #presentation div.

for a better view of this web page, go to http://www.sasllpcpa.com/sas_consulting/

Answer 1

You need so add preload="none" to the video element. The thing is, ie9 only shows poster before video is loaded (or started to load), so if preload is not none the image will at best flicker or not shown at all.