Video Player

by Matthew Day

HTML

<link  href="http://fonts.googleapis.com/css?family=Lato:100,300,400">

<div class="videos">
    <div class="video"><img src="https://s3-us-west-2.amazonaws.com/md-ratios/02_boots_16-9.jpg">
    </div>
    <div class="video-nav">
        <div class="controls">
            <div class="timer">
                3:35
            </div>
            <div class="progress">
                <input type="range" value="25">
            </div>
            <div class="screens">
                <img class="screen" src="https://s3-us-west-2.amazonaws.com/md-icons/screen-size.png">
            </div>
        </div>
    </div>
</div>

CSS

img {
    width: 100%;
}

body {
    padding: 30px;
    font-family: 'Lato', sans-serif;
    font-size: .7em;
    font-weight: 100;
}

.videos {
    position: relative;
    width: 310px;
}

.video {
    height: 173px;
    border: 1px solid #000
}

.video-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 0;
    background: rgba(0,0,0,.5);
}

.controls {
    position: relative;
    width: 100%;
}

.timer {
    width: 13%;
    display: inline-block;
    float: left;
    color: white;
    text-align: right;
    letter-spacing: .1em;
}

.progress {
    display: inline-block;
    float: left;
    width: 60%;
    padding: 0 6%; /* centers bar in between timer and screen-size */
    text-align: center;
}

.screens {
    float: right;
    width: 14%;
}

.screen {
    display: block;
    width: 62%; /* controls size of screen icon */
    margin: 0 auto;
}

input[type=range] {
    /*removes default webkit styles*/
    -webkit-appearance: none;
    
    /*fix for FF unable to apply focus style bug */
    border: 1px solid rgba(255,255,255,.5);
    
    /*required for proper track sizing in FF*/
    width: 100%; /* ? using pixels here overrides parent width */
    background: rgba(255,255,255,0);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 200px;
    height: 10px;
    background: rgba(0,0,0,.4);
    border: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 12px;
    width: 4px;
    background: rgba(255,255,255,.6);
    margin-top: -1px;
}
input[type=range]:focus {
    outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

/*hide the...