JSFiddle - React, Tailwind, and code Playground

HTML

<h1 class="center">Subtitle Placement Beta</h1>
   <div id="video-demo-container">
	<button id="upload-button">Select MP4 Video</button> 
	<input type="file" id="file-to-upload" accept="video/mp4" />
	<video id="main-video" controls>
		<source type="video/mp4">
	</video>
	<canvas id="video-canvas"></canvas>
	<div id="thumbnail-container">
		 Seek to <select id="set-video-seconds"></select> seconds <a id="get-thumbnail" href="#">Download Thumbnail</a>
	</div>
</div>
    
    <div id="thumbEditor" style="display: none;" class="center">
        <div id="inThumb">
            <img id="thumbnail" class="center"/>
            <p id="example">Example</p>
        </div><input type="range" min="0" max="100000" value="0" class="positionsliders center" id="height" oninput = 'subHeight()' style="display: inline;">
        <input type="range" min="0" max="100000" value="0" class="positionsliders center" id="width" oninput = 'subWidth()'>
        <input type="button" value="Center" onClick="center();">
    </div>

CSS

@import url('http://fonts.cdnfonts.com/css/sf-ui-display');
        
        * {
            font-family: "SF UI Display";
        }


body {
	line-height: 1.4;
	color: aliceblue;
    font-weight: 400;
	background-color: #1f2029;
	overflow-x: hidden;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg');
  background-position: center;
  background-repeat: repeat;
  background-size: 4%;
}

.center {
    text-align: center;
      display: block;
  margin-left: auto;
  margin-right: auto;
}

a {
    color: aliceblue;
}

.project {
    text-decoration: none;
    list-style-type: none;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255,255,255, 0.1);
    
}

body {
	margin: 0;
}

#video-demo-container {
	width: 400px;
	margin: 40px auto;
}

#main-video {
	display: none;
	max-width: 400px;
}

#thumbnail-container {
	display: none;
}

#get-thumbnail {
	display: none;
}

#video-canvas {
	display: none;
}

#upload-button {
	width: 150px;
	display: block;
	margin: 20px auto;
}

#file-to-upload {
	display: none;
}

#thumbnail {
    position: relative;
    max-width: 80%;
    max-height: 800px;
    margin: 0;
    z-index: -1;
}

#inThumb {
    display: inline-block;
    min-width: 500px;
    position: relative;
    overflow: hidden;
}

#example {
    z-index: 2;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 50px;
    font-weight: 600;
    margin: 0;
    text-align: center;
    -webkit-text-stroke: 2px red;
}

#width {
    margin: 0;
}

#height {
    -webkit-transform: rotate(90deg);
    position: absolute;
    left: 60px;
    bottom: 507px;
}

JavaScript

var _CANVAS = document.querySelector("#video-canvas"),
	_CTX = _CANVAS.getContext("2d"),
	_VIDEO = document.querySelector("#main-video");
    thumb = document.querySelector('#thumbnail');
    width = document.querySelector('#width');
    editor = document.querySelector("#thumbEditor");
    example = document.querySelector('#example');
    height = document.querySelector('#height');
    thumbWidth = thumb.clientWidth - example.clientWidth;
    thumbHeight = thumb.clientHeight - example.clientHeight;

document.querySelector("#upload-button").addEventListener('click', function() {
	document.querySelector("#file-to-upload").click();
});

document.querySelector("#file-to-upload").addEventListener('change', function() {
    if(['video/mp4'].indexOf(document.querySelector("#file-to-upload").files[0].type) == -1) {
        alert('Error : Only MP4 format allowed');
        return;
    }

    document.querySelector("#upload-button").style.display = 'none';

	document.querySelector("#main-video source").setAttribute('src', URL.createObjectURL(document.querySelector("#file-to-upload").files[0]));
	
	_VIDEO.load();
	_VIDEO.style.display = 'inline';
	
	_VIDEO.addEventListener('loadedmetadata', function() { console.log(_VIDEO.duration);
	    var video_duration = _VIDEO.duration,
	    	duration_options_html = '';

	    for(var i=0; i<Math.floor(video_duration); i=i+4) {
	    	duration_options_html += '<option value="' + i + '">' + i + '</option>';
	    }
	    document.querySelector("#set-video-seconds").innerHTML = duration_options_html;
	    
	    document.querySelector("#thumbnail-container").style.display = 'block';

	    _CANVAS.width = _VIDEO.videoWidth;
		_CANVAS.height = _VIDEO.videoHeight;
	});
});

document.querySelector("#set-video-seconds").addEventListener('change', function() {
    _VIDEO.currentTime = document.querySelector("#set-video-seconds").value;

    document.querySelector("#set-video-seconds").disabled = true;
   ...