JSFiddle - React, Tailwind, and code Playground

by MegaScience

HTML

<!DOCTYPE html>
<html>
    <head>
        <!--<link rel="stylesheet" type="text/css" href="style.css">
        <script src="main.js"></script>-->
    </head>
    <body>
        <table cellspacing="4" cellpadding="0" border="0" class="centerElement" style="text-align: center">
            <colgroup>
                <col style="width: 10%">
                <col span="2" style="width: 40%">
                <col style="width: 10%">
            </colgroup>
            <tbody>
                <tr class="playerCells">
                    <td valign="top" colspan="2">
                        <div id="player0"></div>
                    </td>
                    <td valign="top" colspan="2">
                        <div id="player1"></div>
                    </td>
                </tr>
                <tr>
                    <th style="width: 10%">
                        <input type="button" width="100%" onclick="toggleVideos()" value="Play" id="playPause">
                    </th>
                    <th style="width: 40%">Video 1</th>
                    <th style="width: 40%">Video 2</th>
                    <th style="width: 10%">Apply</th>
                </tr>
                <tr>
                    <th>Set Video:</th>
                    <td>
                        <input type="text" name="textArea" id="video0">
                    </td>
                    <td>
                        <input type="text" name="textArea" id="video1">
                    </td>
                    <td>
                        <input type="button" onclick="setVideos()" value="Set">
                    </td>
                </tr>
                <tr>
                    <th>Set Time:</th>
                    <td>Hours:
                        <input type="text" min="0" name="time" id="time0h" onkeydown="return (event.ctrlKey || event.altKey || (47 < event.keyCode && event.keyCode < 58 && event.shiftKey == false) || (95 < event.keyCode && event.keyCode < 106) || (event.keyCode ==...

CSS

.playerCells > td {
    width: 425px;
    height: 358px;
}
td {
    padding-bottom: 0px;
}
.centerElement {
    margin-left: auto;
    margin-right: auto;
}
input[name="textArea"] {
    width: 99%;
}
input[name="time"] {
    max-width: 12%;
}

JavaScript

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var stopState = 0;
var debug = 0;
var player = [];
var startTime = [1, 0];
var startVideo = ["qeMFqkcPYcg", "g1AJdg3zxlw"];
var video = [document.getElementById("video0"), document.getElementById("video1")];
//var time = [];
/*for (var i = 0; i < player.length; i++) {
    time.push({
        'h': document.getElementById("time" + i + "h"),
            'm': document.getElementById("time" + i + "m"),
            's': document.getElementById("time" + i + "s")
    });
}*/
var time = [{
    'h': document.getElementById("time0h"),
        'm': document.getElementById("time0m"),
        's': document.getElementById("time0s")
}, {
    'h': document.getElementById("time1h"),
        'm': document.getElementById("time1m"),
        's': document.getElementById("time1s")
}];
//var time = [document.getElementById("time0"), document.getElementById("time1")];
var mute = [document.getElementById("mute0"), document.getElementById("mute1")];
var playPause = document.getElementById("playPause");
var doubler = document.getElementById("doubler");
var perma = document.getElementById("perma");
var playerEvents = {
    'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
};

function onYouTubeIframeAPIReady() {
    if (debug) console.log("Side-by-Side Player: Parameters - " + window.location.href + " (Length: " + window.location.href.length + ")");
    if (window.location.href.length) {
        var tempParam = paramArray(window.location.href);
        if (tempParam.video0) startVideo[0] = tempParam.video0;
        if (tempParam.video1) startVideo[1] = tempParam.video1;
        if (tempParam.start0) startTime[0] = tempParam.start0;
        if (tempParam.start1) startTime[1] = tempParam.start1;
    }
    for (var i = 0; i < startVideo.length; i++) {
      ...