关于mouseleave的YouTube API暂停视频

Question

我正在创建一个inserts an YouTube video on hover然后on mouseeave the video is paused.的问题。问题是pause works only the first time.比如果您点击视频然后当您离开div视频时我不再暂停了。我试图绑定moueleave事件，但它仍然不起作用，谢谢

JSFiddle：http://jsfiddle.net/z5vfja46/

HTML：

<div class="video_wrap"><div id="one"></div></div>
<div class="video_wrap"><div id="two"></div></div>
<div class="video_wrap"><div id="three"></div></div>
<div class="video_wrap"><div id="four"></div></div>

js：

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(0);
            event.target.playVideo();
        }

       $(this).children().bind( "mouseleave", function() {
           player.pauseVideo();
       });


    }
});