twitch.tv quadlazer

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">Player 1</span></div>
        <div class="player" id="player-2"><span id="player-2-SWF">Player 2</span></div>
        <div class="player" id="player-3"><span id="player-3-SWF">Player 3</span></div>
        <div class="player" id="player-4"><span id="player-4-SWF">Player 4</span></div>
    </div>
    <div id="control">
        twitch.tv username:
        <input id="video_id" type="text" />
        <div id="player-buttons">
            <div class="player-btn" data-target="player-1">Player 1</div>
            <div class="player-btn" data-target="player-2">Player 2</div>
            <div class="player-btn" data-target="player-3">Player 3</div>
            <div class="player-btn" data-target="player-4">Player 4</div>
        </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 {
            width: 46%;
            height: 46%;
            margin: 2%;
            float: left;
            background: #CCC;
            text-align: center;
        }

JavaScript

// twitch.tv quadlazer
// Based on http://jsfiddle.net/t2t2/A7arr/
$('.player-btn').click(function() {
    var targetPlayer = $(this).data('target');
    var videoID = $('#video_id').val();
    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"
    }, {});
    $('#video_id').val('');
});