JSFiddle - React, Tailwind, and code Playground

by graphettion

CSS

body {
  margin: 0;
  padding: 0;
}

video {
  max-width: 100%;
}

.container {
  margin: 0 auto;
}

.video-container {
  background: #151515;
  text-align: center;
  float: left;
  width: 80%;
}

.transcript-container {
  height: 34em;
  float: left;
  width: 20%;
  overflow-y: scroll;
}

.transcript {
  display: inline-block;
  padding: 1em 2em;
  background: #fff;
}

.transcript-close {
  margin: 0;
  padding: 0;
}

.js-subtitles-off {
  display: none;
}

.js-subtitles-highlight {
  background: #FF0;
}

JavaScript

//<div class="container">
var container = document.createElement('div')
container.setAttribute("class", "container")

//<div class="video-container">
var videoContainer = document.createElement('div')
videoContainer.setAttribute("class", "video-container")

//<div class="transcript-container">
var subtitleHTMLDivElementContainer = document.createElement('div')
subtitleHTMLDivElementContainer.setAttribute('class', 'transcript-container')

//<div class="transcript">
var subtitleHTMLDivElement = document.createElement('div')
subtitleHTMLDivElement.setAttribute('class', 'transcript')

//<video> <source> <track>
var frame = document.createElement('video')
var source = document.createElement('source')
var track = document.createElement('track')
var track2 = document.createElement('track')

function setVideoAttributes() {
  frame.id = "1"
  frame.setAttribute('preload', '')
  frame.setAttribute('controls', '')
  frame.setAttribute('crossorigin', '')
  frame.setAttribute('width', '720px')
}

function setSourceAttributes() {
  source.src = 'https://ableplayer.github.io/ableplayer/media/wwa.mp4'
  source.type = 'video/mp4'
}

function setTrackAttributes() {
  track.setAttribute('label', 'English')
  track.setAttribute('kind', 'subtitles')
  track.src = 'https://ableplayer.github.io/ableplayer/media/wwa_captions_en.vtt'
  track.setAttribute('srclang', 'en')
}

function setTrackAttributes2() {
  track2.setAttribute('label', 'Spanish')
  track2.setAttribute('kind', 'subtitles')
  track2.src = 'https://ableplayer.github.io/ableplayer/media/wwa_captions_es.vtt'
  track2.setAttribute('srclang', 'es')
}

//Gets Current Time From Video
function compareSubtitlesWithVideo(subtitleStartTimes) {
  frame.ontimeupdate = function() {
    return getCurrentSubtitle(subtitleStartTimes)
  }
}

//Gets current subtitle and adds a class to it
function getCurrentSubtitle(subtitleStartTimes) {

  var transcriptHTMLParagraphs = subtitleHTMLDivElement.querySelectorAll('p');

  //Compare...