JSFiddle - React, Tailwind, and code Playground

by Derk-Jan Hartman

HTML

<script src="https://vjs.zencdn.net/5.3/video.min.js"></script>
<link rel="stylesheet" href="https://vjs.zencdn.net/5.3/video-js.min.css">
<video id="really-cool-video" class="video-js vjs-default-skin" controls
 preload="auto" width="640" height="264" poster="https://vjs.zencdn.net/v/oceans.png">
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
  <source src="http://vjs.zencdn.net/v/oceans.ogv" type='video/ogg'>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser
    that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

JavaScript

$( function () {
  $( 'video, audio' ).each( function () {
    videojs( this, {
      controlBar: {
			  liveDisplay: false,
			  volumeMenuButton: {
				  vertical: true,
				  inline: false
			  }
		  }
    }, function () {
      var player = this;
    } );
  } );
} );