HTML5 video and safari don't play in nice

Question

HTML5 video and safari don't play in nice

Running problems with safari. For some reason, the footer disappears beneath the video until you are moving to where it should be. As soon as you do this, it will fall into place and work fine. To play it, remove the footer and reload the page, or click on the link and return home.

Tested on several Mac computers (MacPro using a 1080p monitor, Macbook Air and Macbook Pro), using all browsers, and the video works fine in Opera, Chrome, Firefox, even in IE (parallel), but not in safari. Windows machines have no problems using all browsers Chrome, Firefox, Opera and IE.

The video background is built on a WordPress site using underscore as the basis for the theme that I am creating.

The following URL is what gives me the opportunity.

http://yokellocalhosting.com/freddy/

This is how I have the background setting in HTML:

<?php if(is_front_page() ) { ?>
    <div id="videoContainer">
        <video autoplay loop id="videoBackground" preload="auto">
            <source src="http://yokellocalhosting.com/freddy/wp-content/uploads/2014/03/Fabulous_Freddys_Background_MP4.mp4" type="video/mp4" />
            <source src="http://yokellocalhosting.com/freddy/wp-content/uploads/2014/03/Fabulous_Freddys_Background_OGG.ogg" type="video/ogg" />
            <source src="http://yokellocalhosting.com/freddy/wp-content/uploads/2014/03/Fabulous_Freddys_Background_WEBM.webm" type="video/webm" />
        </video>
    </div>
<?php } ?>

Here is the related CSS:

#videoContainer{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 9;
    width: 100%;
    height: 100%;
}
#videoBackground{
    position: relative;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 9;
}