Stronia Video Player Series III - DEMO

This is the demo for stronia.com's article on video player series part III

by Anshuman Dwibhashi

HTML

Our video player doesn't yet work, we're simply styling it yet...<br/>
<a href="http://jsfiddle.net/anshudwibhashi/4ggQM/3/">View code</a>
<br/><br/>

<section id="skin">
    <!--Our custom video player-->
    <video height="360px" id="player" width="640px">
        <source src="http://www.w3schools.com/html/movie.mp4"></source>
        <source src="http://www.w3schools.com/html/movie.ogg"></source>
    </video>

    <!--Our custom controls-->
    <!--We haven't covered this in the video HTML5 tutorial-->
    <nav>
        <!--First comes our play/pause button-->
        <div id="playPause">
            <button type="button" id="playPause">Play</button>
        </div>
        
        <!--Then come our progress bars-->
        <div id="backgroundBar">
            <div id="bufferingBar">
                <div id="progressBar">
                </div>
            </div>
        </div>
        
        <div style="clear:both"></div>
    </nav>
</section>

CSS

body{
    text-align:center;
}

#skin{
    width:700px;
    margin:10px auto;
    padding:10px;
    background:linear-gradient(#111,#333);
    border:none;
    box-shadow:0 0 10px 10px rgba(0,0,0,0.3);
    border-radius:10px;
} 

nav{
    margin:5px 0px;
}

/*Our buttons div is called playPause if you remember*/
#playPause{
    width:75px;
    height:25px;
    float:left;
}

#backgroundBar{
    position:relative;
    float:left;
    margin-left:10px;
    width:600px;
    height:25px;
    border-radius:20px;
    background-color:gray;
}

#bufferingBar{
    position:absolute;
    width:0px;
    height:25px;
    background-color:#555;
    border-radius:20px;
}

#progressBar{
    position:absolute;
    width:0px;
    height:25px;
    background-color:black;
    border-radius:20px;
}