JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.5/css/AdminLTE.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.20.2/video-js.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/admin-lte/2.4.5/js/adminlte.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.20.2/video.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test Page</title>
</head>
<body class="hold-transition layout-top-nav">
<div class="wrapper fixed-header">
    <header class="main-header">
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top">
        </nav>
    </header>


    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
      <video class="video-js vjs-default-skin vjs-big-play-centered" preload="none" controls="controls" width="400" height="300">
        <source type="video/mp4" src="https://www.w3schools.com/html/mov_bbb.mp4">
      </video>
    </div>
</div>
</body>
</html>

JavaScript

$(document).ready(function() {
  if($('.video-js').length) {
    var vid = $('.video-js').get();
    for(var i in vid) {
      var player = videojs(vid[i], {
        preload: 'auto',
        controlBar: {fullscreenToggle: true},
        playbackRates: [0.8, 1, 1.25, 1.5, 1.75, 2]
      });
    }
  }
});