JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://releases.flowplayer.org/5.4.3/flowplayer.min.js"></script>
<link rel="stylesheet" href="http://releases.flowplayer.org/5.4.3/skin/minimalist.css">
<div data-swf="//releases.flowplayer.org/5.4.3/flowplayer.swf"
 class="flowplayer is-poster"
 data-ratio="0.416">
  <video preload="none">
    <source type="video/mp4" src="http://encodable.com/uploaddemo/files/video/butterfly..mp4" />
  </video>
</div>

CSS

/* custom player skin */
.flowplayer {width: 80%; background-color: #222; background-size: cover; max-width: 800px; }
.flowplayer .fp-controls { background-color: rgba(0, 0, 0, 0.4)}
.flowplayer .fp-timeline { background-color: rgba(0, 0, 0, 0.5)}
.flowplayer .fp-progress { background-color: rgba(208, 227, 242, 1)}
.flowplayer .fp-buffer { background-color: rgba(166, 166, 166, 1)}