JSFiddle - React, Tailwind, and code Playground

by Andrew Warren

HTML

<script src="http://vjs.zencdn.net/4.1/video.js"></script>
<link rel="stylesheet" href="http://vjs.zencdn.net/4.1/video-js.css">
<video id="example_video_1" onclick="togglePause()" class="video-js vjs-default-skin" loop preload="auto" width="530" height="530" poster="http://d2gw81m0mwbalc.cloudfront.net/thumbs/92.jpg" autoplay>
    <source src="https://v.cdn.vine.co/r/videos/FF53A4C631986439370184028160_180cc4f0f34.3.1_Y6.LpnDVl431otYpovktTb.7RbrdHAp4FwyuifZRVj9bDiQt0rajUWYk861cWXOb.mp4" type='video/mp4' />
</video>

CSS

#example_video_1:hover { cursor:pointer; }
.vjs-control-bar { display:none!important; }

JavaScript

var myPlayer = videojs("example_video_1");
this.togglePause = function(){
  if (myPlayer.paused()) {
    myPlayer.play();
  }
  else {
    myPlayer.pause();
  }
}