twitch.tv quadlazer (Race For Wool + coestar chat)

by t2t2

HTML

<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <div id="players">
        <div class="player" id="player-1"><span id="player-1-SWF">Stream 1</span></div>
        <div class="player" id="player-2"><span id="player-2-SWF">Stream 2</span></div>
        <div class="player" id="player-3"><iframe src="http://www.twitch.tv/chat/embed?channel=SethBling" width="100%" height="100%" frameBorder="0" style="overflow: hidden;"></iframe></div>
        <div class="player" id="player-4"><iframe src="http://www.twitch.tv/chat/embed?channel=dewtroid" width="100%" height="100%" frameBorder="0" style="overflow: hidden;"></iframe></div>
    </div>
    <div id="control">
        twitch.tv username:
        <input id="video_id" type="text" />
        <div id="player-buttons">
            <div class="player-btn player-1" data-target="player-1">Stream 1</div>
            <div class="player-btn player-2" data-target="player-2">Stream 2</div>
            <div class="player-btn player-3" data-target="player-3">Stream 3</div>
            <div class="player-btn-nojs player-4">chat</div>
        </div>
        
        <div>
            Built by <a href="http://www.reddit.com/user/t2t2">t2t2</a> &amp; updates by <a href="http://www.reddit.com/user/authorblues">authorblues</a>
        </div>
    </div>

CSS

html, body {
            height: 100%;
            margin: 0;
        }
        body {
            overflow: hidden;
        }
        #players {
            width: 80%;
            height: 100%;
            float: left;
        }
        .player {
            width: 50%;
            height: 50%;
            float: left;
            background: #CCC;
        }
        .player>span {
            display: block;
            text-align: center;
            text-transform: uppercase;
            background-color: rgba(255, 255, 255, 0.2);
        }
        #control {
            width: 17%;
            padding: 1% 1% 1% 2%;
            height: 94%;
            overflow-y: scroll;
            float: left;
            background: #BBB;
        }
        #video_id {
            width: 100%;
                -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
            -moz-box-sizing: border-box;    /* Firefox, other Gecko */
            box-sizing: border-box;         /* Opera/IE 8+ */
        }
        #player-buttons {
            width: 100%;
            height: 100px;
            margin-top: 5px;
        }
        .player-btn, .player-btn-nojs {
            width: 46%;
            height: 46%;
            margin: 2%;
            float: left;
            background: #CCC;
            text-align: center;
        }

JavaScript

// twitch.tv quadlazer (RFW modification + coestar chat)
// Based on http://jsfiddle.net/t2t2/A7arr/

function loadPlayer(targetPlayer, videoID) {
    if ($('#' + targetPlayer + ' span').length === 0) {
        $('#' + targetPlayer).html('<span id="' + targetPlayer + '-SWF"></span>');
    }
    swfobject.embedSWF('http://www.twitch.tv/widgets/live_embed_player.swf?channel=' + videoID + '&auto_play=true', targetPlayer + '-SWF', "100%", "100%", "9", null, {}, {
        allowScriptAccess: "always"
    }, {});
    $('.player-btn.' + targetPlayer).text(videoID);
}

$('.player-btn').click(function() {
    var targetPlayer = $(this).data('target');
    var videoID = $('#video_id').val();
    loadPlayer(targetPlayer, videoID);
    $('#video_id').val('');
});

$(document).ready(function() {
    loadPlayer('player-1', 'SethBling');
    loadPlayer('player-2', 'dewtroid');
//    loadPlayer('player-3', 'diredwarf');
});