在mouseleave上暂停YouTube视频

Question

我创建了一个inserts an YouTube iframe when user hovers on a div然后when mouse leaves the div the video is paused.的功能。但video is paused only the first time一切正常，当您再次点击播放然后离开div时，它不会暂停。有任何想法吗？谢谢。

小提琴：http://jsfiddle.net/508oknm7/27/

var tag = document.createElement('script'),
    firstScriptTag = document.getElementsByTagName('script')[0];

tag.src = "https://www.youtube.com/player_api";
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
$(".video_wrap").on({
    mouseenter: function () {

        player = new YT.Player($(this).children().attr('id'), {
            height: '240',
            width: '320',
            videoId: '-NschES-8e0',
            playerVars: {
            wmode: "transparent",
            controls: 0,
            showinfo: 0,
            rel: 0,
            modestbranding: 1,
            iv_load_policy: 3 //anottations
            },
            events: {
                'onReady': onPlayerReady
            }
        });

        function onPlayerReady(event) {
            player.setVolume(10);
            event.target.playVideo();
        }


    },
    mouseleave: function () {
        player.pauseVideo();

    }
});