YouTube quadlazer

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">
        Video ID:
        <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>
        
        <a href="#" onClick="playAll(); return false">Play all</a>
        <a href="#" onClick="pauseAll(); return false">Pause all</a>
    </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

$('.player-btn').click(function() {
    var targetPlayer = $(this).data('target');
    var videoID = $('#video_id').val();
    if ($('#' + targetPlayer + ' span').length > 0) {
        swfobject.embedSWF('http://www.youtube.com/e/' + videoID + '?version=3&enablejsapi=1', targetPlayer + '-SWF', "100%", "100%", "9", null, {}, {
            allowScriptAccess: "always"
        }, {});
    } else {
        $('#' + targetPlayer + '-SWF').get(0).loadVideoById(videoID);
    }
    $('#video_id').val('');
});

function playAll() {
    $('#players object').each(function() {
        this.playVideo();
    });
}

function pauseAll() {
    $('#players object').each(function() {
        this.pauseVideo();
    });
}