simple video player with custom controls using html5 video and input[type=range] element

by epinapala

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>

CSS

.player {
    margin: auto;
    padding: 10px;
    width: 90%;
    max-width: 900px;
    min-width: 320px;
}
.mediaplayer {
    position: relative;
    height: 0;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16/9 */
}
.mediaplayer video, .mediaplayer .polyfill-video {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}