JSFiddle - React, Tailwind, and code Playground

by Phil Brown

HTML

<link rel="stylesheet" type="text/css" href="https://vjs.zencdn.net/5-unsafe/video-js.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://vjs.zencdn.net/5-unsafe/video.js"></script>

<video class="video-js vjs-default-skin" width="100%" height="100%"
      controls oncontextmenu="return false;" preload="none"
      data-setup="{&quot;aspectRatio&quot;:&quot;640:267&quot;,&quot;playbackRates&quot;:[1,1.5,2]}">
      <source src="https://cdn.rhythmads.com/videos/tests/Big%20Hero%206%20(Low%20Battery).mp4" type='video/mp4' />
</video>

CSS

body {
  margin-top: 20px;
  background: #222;
  text-align: center; 
  color: #aaa;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: radial-gradient(#333, hsl(200,30%,6%) );
}
a, a:hover, a:visited { color: #76DAFF; }
.video-js .vjs-control-bar { 
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.video-js {
  font-size: 10px;
  color: #fff;
}
.vjs-default-skin .vjs-big-play-button {
  font-size: 3em;
  line-height: 1.5em;
  height: 1.5em;
  width: 3em;
  border: 0.06666em solid #fff;
  border-radius: 0.3em;
  left: 0.5em;
  top: 0.5em;
}

.video-js .vjs-control-bar,
.video-js .vjs-big-play-button,
.video-js .vjs-menu-button .vjs-menu-content {
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
}

.video-js .vjs-slider {
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-volume-level,
.video-js .vjs-play-progress,
.video-js .vjs-slider-bar {
  background: #fff;
}

.video-js .vjs-load-progress {
  background: #bfc7d3;
  background: rgba(115, 133, 159, 0.5);
}

.video-js .vjs-load-progress div {
  background: white;
  background: rgba(115, 133, 159, 0.75);
}