JSFiddle - React, Tailwind, and code Playground

HTML

<div >
    <video id=home_video class="video-js vjs-default-skin" controls preload=none width="auto" height="auto"
            poster="http://video-js.zencoder.com/oceans-clip.jpg">
          <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
          <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/>
          
        </video>
</div>

CSS

</style><!-- jsfiddle hack -->
<script src="http://vjs.zencdn.net/4.0.4/video.js"></script>
    <link href="http://vjs.zencdn.net/4.0.4/video-js.css" rel="stylesheet">
<style>




.video-js video {position: relative !important;}
 /* The video should expand to force the height of the containing div.
 One in-flow element is good. As long as everything else in the container
 div stays `position: absolute` we're okay */

.video-js .vjs-big-play-button {
    top: 50%; /* errrr, why isn't the play button centered in the default skin? :) */
    left: 50%;
    margin:-4em 0 0 -6em; /* the old negative margin trick */
}

JavaScript

$(document).ready(function (){
    var homePlayer=videojs("home_video");
});