javascript - Show movie then fade out div

Question

I'm working on an custom map, I have the map from google and alert the style - it all works. But I would like to show a HTML5 movie in an overlapping div and then fade it out after it is finished. This is what I've got so far.

jQuery

<script type="text/javascript">
    $('#soundlogo').delay(400).fadeOut(400);
</script>

CSS

#soundlogo {
    height:100%;
    width:100%;
    display:block;
    background-color:#FFF;
    position:fixed;
    z-index:100;
}

Body

<div id="soundlogo">
    <video width="100%" autoplay>
        <source src="video/soundlogo-web.mp4" type="video/mp4" />
        Your browser does not support the video tag.
    </video>
</div>

The problem is that the fade never occurs.

Answer 1

You need to wrap your jQuery code with the ready function:

$(document).ready(function(){
    $('#soundlogo').delay(400).fadeOut(400);
});