JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css" media="all" />

<div id="mixer-ui">
    <ul id="streams"></ul>
    <div id="controls">
        <div id="slider"></div>
        <a href="#" id="recording">start recording</a>
    </div>
</div>

<div>
    <button id="view-transcript">view transcript</button><br />
    <div id="transcript"></div>
</div>

CSS

body {
    font: 12px Tahoma, sans-serif; text-align: center; 
}

#mixer-ui {
    border: 1px solid #594CD8;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    padding: 2em;
    display: inline-block;
    margin: 0 auto 2em;
}

#streams {
    list-style-type: none;
}

.stream {
    margin: .3em;
    display: inline-block;
    position: relative;
    padding-bottom: 2em;
}
.stream-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 148px;
}

#slider {
    width: 20em;
    margin: 0 auto 1em;
}

#transcript {
    border: 1px solid #594CD8;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em;
    padding: 2em;
    display: none;
    margin: 0 auto 2em;
    font: 12px Consolas,Courier,monospace;
}

JavaScript

var videos = ['S9ppcdS1vzo', 'Ye6YHQ8AZzU'],
    nextStreamId = 0,
    recording = false,
    timeline = [];

// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
    var player = $('#video' + playerId)[0];
    
    player.cueVideoById(videos[+playerId]);
    
    setTimeout(function() {
        player.setVolume(0);
        player.playVideo();
        player.pauseVideo();
        player.setVolume(50);
    });
}

window.onload = function () {
    function addToTimeline(event) {
        if (recording || event.command == 'start')
            timeline.push($.extend({ time: +new Date() }, event));
    }
        
    function addVideoStream(videoId) {
        var playerId = nextStreamId++,
            containerId = 'video' + playerId;
        
        $('<li class="stream"><div id="' + containerId  + '" /><div class="stream-controls"><a href="#" class="toggleStream">play</a></div></li>').prependTo('#streams');
        swfobject.embedSWF("http://www.youtube.com/apiplayer?enablejsapi=1&playerapiid=" + playerId, containerId , "240", "148", "8", null, null, { allowScriptAccess: "always", wmode: "transparent" }, { id: containerId });
    }
    
    $("#slider").slider({
            value: 50,
            min: 0,
            max: 100,
            slide: function(event, ui) {
                $('#video0')[0].setVolume(Math.max(0, Math.min(100, ui.value)));
                $('#video1')[0].setVolume(Math.max(0, Math.min(100, 100 - ui.value)));
                addToTimeline({ command: 'volume', value: ui.value });
            }
        });

    $.each(videos, function() {
        addVideoStream(this);
    });
    
    $(document)
        .delegate('.toggleStream', 'click', function() {
            var $this = $(this),
                stream = $this.closest('.stream'),
                player = stream.find('[id*=video]')[0],
                command = player.getPlayerState() != 1 ? 'play' : 'pause';
            
           ...