JSFiddle - React, Tailwind, and code Playground

by djp3d

HTML

<script src="https://vjs.zencdn.net/4.11/video.js"></script>
<link rel="stylesheet" href="https://vjs.zencdn.net/4.11/video-js.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<button id="play">
  play video 1
</button>

<div class="modal hidden">
  <div class="video-wrapper" style="max-width:1200px;">
    <video id="my_video_1" class="video-js vjs-default-skin vjs-16-9" controls preload="auto" data-setup='{ "playbackRates": [0.5, 1, 1.5, 2],"fluid" : true }'>
    </video>
  </div>

  <button id="close">
    X
  </button>

</div>

CSS

body {
  background-color: red;
  margin: 0;
}

#close {
  position: absolute;
  top: 0;
  right: 0;
}

#play {
  z-index: 99999999;
  position: absolute;
  top: 0;
}

.modal {
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
  margin-top: 0px;
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.8);
}
.modal.hidden {
  margin-top: -9999px;
  opacity: 0;
}



.video-wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.video-wrapper > video {
  width: 100%;

}

.vjs-control.vjs-custom-button {
    cursor: pointer;
    font-size: 1.2em;
    line-height: 2.5em;
}

.vjs-control.vjs-custom-button {
    cursor: pointer;
}

.vjs-live-controls.vjs-control {
    display: none;
}

.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
    display: block;
    visibility: unset !important;
    opacity: 1 !important;
    -webkit-transition: visibility 1s,opacity 1s;
    -moz-transition: visibility 1s,opacity 1s;
    -o-transition: visibility 1s,opacity 1s;
    transition: visibility 1s,opacity 1s;
}

.video-js .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-left: -1em;
    width: 2em;
    border: none;
    color: #fff;
    -webkit-transition: border-color .4s, outline .4s, background-color .4s;
    -moz-transition: border-color .4s, outline .4s, background-color .4s;
    -ms-transition: border-color .4s, outline .4s, background-color .4s;
    -o-transition: border-color .4s, outline .4s, background-color .4s;
    transition: border-color .4s, outline .4s, background-color .4s;
    background-color: rgba(0, 0, 0, .45);
    font-size: 3.5em;
    border-radius: 50%;
    height: 2em!important;
    line-height: 2em!important;
    margin-top: -1em!important
}

.vjs-default-skin .vjs-control:focus:before, .vjs-default-skin .vjs-control:hover:before {
    text-shadow:...

JavaScript

var source = "";

   videojs.Btn = videojs.Button.extend({
     init: function(player, options) {
       videojs.Button.call(this, player, options);
       this.on('click', this.onClick);
     }
   });

   videojs.Btn.prototype.onClick = function() {

     var parts = source.split("/");
     var name = parts[parts.length - 1];
     downloadURI(source, name);


   };

   var createCustomButton = function() {
     var props = {
       className: 'vjs-custom-button vjs-control',
       innerHTML: '<div class="vjs-control-content"><span class="vjs-control-text">download</span><span class="text">download</span></div>',
       role: 'button',
       'aria-live': 'polite',
       tabIndex: 0
     };
     return videojs.Component.prototype.createEl(null, props);
   };

   var myBtn;
   videojs.plugin('myBtn', function() {
     var options = {
       'el': createCustomButton()
     };
     myBtn = new videojs.Btn(this, options);
     this.controlBar.el().appendChild(myBtn.el());
   });

   var vid = videojs('my_video_1', {
     plugins: {
       myBtn: {}
     }
   }, function() {


     var myPlayer = this,
       id = myPlayer.id();
     // Make up an aspect ratio
     var aspectRatio = 900 / 1600;

     function resizeVideoJS() {
       var width = document.getElementById(id).parentElement.offsetWidth;
       console.log("w: " + width);
       myPlayer.width(width).height(width * aspectRatio);

     }

     // Initialize resizeVideoJS()
     resizeVideoJS();
     // Then on resize call resizeVideoJS()
     window.onresize = resizeVideoJS;

   });



   $("#play").click(function() {
     $(".modal").toggleClass("hidden");


     source = "https://vjs.zencdn.net/v/oceans.mp4";

     vid.src([{
       type: "video/mp4",
       src: "https://vjs.zencdn.net/v/oceans.mp4"
     }]);


   });

   $("#close").click(function() {
     $(".modal").toggleClass("hidden");

     vid.pause();
     vid.currentTime(0);

   });

   function downloadURI(dataUrl, filename) {

    ...