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

by Glynne Turner

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<iframe width="560" height="315" src="https://www.youtube.com/embed/TbaVj9wdm6Y" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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%;
}