JSFiddle - React, Tailwind, and code Playground

Styling Video Controls - forked from http://jsfiddle.net/audetwebdesign/EnDHw/

by dledle2

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/video.js/6.2.5/video.min.js"></script>
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/dashjs/2.5.0/dash.all.min.js"></script> -->
<script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.9.1/videojs-dash.min.js"></script>
 
<script src='//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.8.3/videojs-contrib-hls.min.js'></script>
 
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>



<div id="video-panel">
<div id="video-container" class="video-js-box">
   <div id="play" class="playBT"><img class="imgBT" src="//2.bp.blogspot.com/-RnPjQOr3PSw/Teflrf1dTaI/AAAAAAAAAbc/zQbRMLQmUAY/s1600/player_play.png" /></div>
	<video id="video1" autoplay controls preload='auto'>
		<source    src="http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on" type="application/x-mpegURL"             />
	</video>
</div>
<div id="video-controls">
        <div id="footerplay"><img src="//www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/play.png" /></div>
        <div id="footerpause"><img src="//www.cssaddons.com/uploads/goruntulenme/jQueryPausePlay/images/pause.png" /></div>
    <div id="progressbar">
	    <div id="chart"></div>
	    <div id="seeker"></div>
    </div>	        
</div>
</div>

CSS

#video-panel {
    border: 4px solid blue;
    padding: 4px 50px;
}
.video-js-box {
    width: auto;
    height: auto;
    outline: 1px dotted blue;
    position: relative;
    display: block;
}
video {
    outline: 1px dotted blue;
    margin: 0 auto;
    display: block;
}

#play {
    position:absolute;
    top: 50%;
    left: 50%;
    outline: 1px dotted red;
}

.imgBT{
    width:50px;
    height:50px;
    vertical-align: bottom;
    margin-left: -25px;
    margin-top: -25px;
}

#video-controls {
    outline: 1px solid red;
    overflow: auto;
}

#footerplay {
    float: left;
    margin-left: 27px;
}

#footerpause {
    float: left;
    margin-left: 27px;
}

#progressbar {
    float: left;
    outline: 1px dotted black;
    display: inline-block;
    width: 200px;
    height: 27px;
    margin-left: 27px;
}

#footerplay img, #footerpause img{
	height:27px;
}