JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="vf-inline-video vf-paused">
    <video autobuffer="autobuffer" id="vf-video-131473465037111273">\
        <source src="http://s3.viafoura.net/whotheman.com/470916.fmt3.mp4" type="video/mp4">
        <source src="http://s3.viafoura.net/whotheman.com/470916.fmt3.mp4" type="video/webm; codecs='vp8, vorbis'">
    </video>
    <div class='vf-video-options'>
        <a href='#' class='vf-icon vf-pause' title='Pause Video' onclick='Viafoura.publish(\"video-play\", [event, this]);'>Pause Video</a>
        <div class='vf-timeline'>
            <div class='vf-progress-bar'></div>
        </div>
        <div class='vf-duration'>2:00/3:45</div>
        <div class='vf-volume'>
            <a href="#" class="vf-level_1" title="Volume 10%">Volume 20%</a>
                <a href="#" class="vf-level_2" title="Volume 40%">Volume 40%</a>
                <a href="#" class="vf-level_3" title="Volume 60%">Volume 60%</a>
                <a href="#" class="vf-level_4" title="Volume 80%">Volume 80%</a>
                <a href="#" class="vf-level_5" title="Volume 100%">Volume 100%</a>
        </div>
    </div>
    <div class='vf-clearBoth'></div>
</div>

CSS

.vf-inline-video {
  display: block;
  border: 1px solid red;  
  position: relative;
}
.vf-inline-video video {
    z-index: 1;
    position: relative;
}
.vf-inline-video:hover .vf-video-options,
.vf-inline-video.vf-paused .vf-video-options {
    opacity: 1;
}
.vf-video-options {
    opacity: 0;
    transition: all .3s linear;
    -o-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    font-family: sans-serif;
    position: relative;
    font-size: 12px;
    height: 34px;
    width: 100%;
    margin: -36px 0 0 0;
    float: left;
    background: #000;
    z-index: 999;
    border-bottom: 1px solid #5a5a5a;
}

.vf-video-options a {
    color: #fff;
    text-decoration: none;
}

.vf-play,
.vf-pause {
    height: 1px;
    width: 1px;
    overflow: hidden;
    line-height: 999px;
    margin: 10px 0 0 2%;
    padding: 20px 0 0 24px;
    display: block;
    float: left;
}

.vf-play:before {
    content: ' ';
    display: block;
    position: absolute;
    z-index: 999;
    border:8px solid transparent;
    border-width:8px 12px;
    border-left-color:#fff;
    margin: -20px 0 0 -20px;
    background:transparent;
}

.vf-play:hover:before {
    border-left-color:#ccc;   
}

.vf-pause:before {
    content: ' ';
    display: block;
    position: absolute;
    margin: -20px 0 0 -20px;
    width:4px;
    height:14px;
    border:4px solid #fff;
    border-width:0 4px;
    background:transparent;   
}

.vf-pause:hover:before {
    border-color: #ccc;
}

.vf-timeline {
    height: 4px;
    width: 70%;
    display: block;
    background: #fff;
    float: left;
    margin: 15px 0 0 2%;
}

.vf-progress-bar {
  background: #acacac;
  width: 60%;
  height: 4px;
  display: block; 
}

.vf-duration {
   color: #fff;
   float: left;
   display: block;
   font-size: 10px;
   margin: 10px 0 0 2%;
}

.vf-volume {
 display: block;
 float: right;  
 margin: 7px 2% 0 0;
}

.vf-volume a {
 width: 4px;
 height: 1px;
 padding: 3px 0 0 0;
...