在mouseleave上暂停YouTubevideo

我创建了一个function， 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(); } });