Why does youtube api conflict with jquery?

Question

JavaScript

There is a standard YouTube api code for controlling the YouTube player. But when wrapping this code in a jquery function, the code refuses to work.

Here is the code:

<iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/5wosC9QLQTM?enablejsapi=1"></iframe>
<script src="https://www.youtube.com/iframe_api"></script>

$(function(){

var playlist=["0Bmhjf0rKe8","jQZtk-fCWQ4","5wosC9QLQTM"];
var whonext=0;
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: playlist[0],
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
    whonext++;
}
function playNext(){
    player.loadVideoById({'videoId': playlist[whonext],
                          'startSeconds': 5,
                          'endSeconds': 60,
                          'suggestedQuality': 'large'});

    whonext++;
}
function onPlayerReady(event) {
    event.target.playVideo();
}
function onPlayerStateChange(event) {        
    if(event.data === 0) {            
        playNext();
    }
}	

onYouTubePlayerAPIReady();
    
};

Here is a fiddle for clarity: jsfiddle.net/v3qzb/16