JSFiddle - React, Tailwind, and code Playground

by mattography

HTML

<div class="RT_VideoPlayer" rt_VideoLink="video.mp4?"></div>

CSS

*{
  margin:0;
  padding:0;
  font-family: Knowledge!important;
}

#flashContent{
  width:100%;
  height:500px;
  background-color:#000;
}
#flashContent object{
  width:100%;
  height:100%;
}


/*video player*/
.html5_video{
  position: relative;
}

video::-webkit-media-controls {
  display:none !important;
}
video::-webkit-media-controls-enclosure {
  display:none !important;
}

/*seek bar*/
input[type=range]{
    -webkit-appearance: none;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0.0, #ff9001),
        color-stop(0.0, #777)
    );
}

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 2px;

    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background-color: #FFF;
    margin-top: -8px;
}

input[type=range]:focus {
    outline: none;
}
.video_player video{
  width:100%;
  min-width:500px;
}
/* video controls */

  .video-controls {
    position: absolute;
    background: rgba(23,26,27,.44);
    z-index: 2147483647;/*has to be here for full screen*/
    /* default min-height */
    height: 12%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    min-width:500px;
  }

  .video-controls .container-fluid {
    position: relative;
    left: auto;
    top: 50%;
    margin-top: -14px;
    height: 28px;
    line-height: 28px;
    width: inherit;
  }

  /* button & button alignments */

  .video-controls .btn {
    padding: 0;
    border: 0;
    max-width: 100%;
    height: 100%;
    background-color: transparent;
    text-indent: 200%;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: top;
    outline: 0;
    cursor
  }

  .video-controls .btn-group-right {
    position: absolute;
    top: -2px;
    right: -106px;
    height: 100%;
  }

  .play {
    position: relative;
    left: -73px;
   ...

JavaScript

var player = function(){

    var returnObj = {},
    isMobile = function(){

       if( navigator.userAgent.match(/Android/i)
       || navigator.userAgent.match(/webOS/i)
       || navigator.userAgent.match(/iPhone/i)
       || navigator.userAgent.match(/iPad/i)
       || navigator.userAgent.match(/iPod/i)
       //|| navigator.userAgent.match(/BlackBerry/i)
       //|| navigator.userAgent.match(/Windows Phone/i)
       ){
          return true;
        } else {
          return false;
        }

    },
    choosePlayer = function(){
      var returnVar = "";
      if(isMobile()){
        returnVar = "html5";
      }else{
        if(navigator.userAgent.match(/chrome/i)){
          returnVar = "html5";
        }else if(navigator.userAgent.match(/safari/i)){
          returnVar = "html5";
        } else {
          returnVar = "flash";
        }
      }
      return returnVar;
    };

    function flashVideoObj(obj){
      var videoStringObj = '<div id="flashContent">'
        + '<object type="application/x-shockwave-flash" width="100%" data="swf/player.swf" id="Untitled-1" style="float: none; vertical-align:middle" style="width:100%;">'
        + '<param name="movie" value="swf/player.swf" />'
        + '<param name="FlashVars" value="playauto=true&opener=http://vs.url.com/video/origin/mp4/2014-12-09/1418158597106_webIntro_4(4099_R23MP42000).mp4&closer=http://vs.url.com/video/origin/mp4/2014-12-09/1418159698470__url_N(4103_R23MP42000).mp4&video=' + obj.videoUrl + '">'
        + '<param name="quality" value="high" />'
        + '<param name="bgcolor" value="#000000" />'
        + '<param name="play" value="true" />'
        + '<param name="loop" value="true" />'
        + '<param name="wmode" value="window" />'
        + '<param name="scale" value="showall" />'
        + '<param name="menu" value="true" />'
        + '<param name="devicefont" value="false" />'
        + '<param name="salign" value="" />'
        + '<param name="allowScriptAccess"...