twitch.tv quadlazer (RMCT edition)
HTML
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<iframe height="378" width="620" frameborder="0" scrolling="no" src="http://player.twitch.tv/?channel=amazhs&html5"></iframe>
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 (RMCT edition)
// Based on http://jsfiddle.net/t2t2/A7arr/
function loadPlayer(targetPlayer, videoID) {
if (targetPlayer == "player-4") {
$('#player-4 iframe').attr('src', 'http://www.twitch.tv/chat/embed?channel='+videoID);
return;
}
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');
});