YouTube IFrame播放器会阻止绑定在其父容器上的鼠标事件

Question

我正在尝试使用IFrame api加载YouTube播放器。

DOM结构

<div id="player-wrapper">
    <div id="player">
    </div>
</div>

加载播放器的Jquery代码

$(document).ready(function () {
        $('head').append($('<script src="https://www.youtube.com/iframe_api"></script>'));
});

window.onYouTubeIframeAPIReady = function() {
    Player = new YT.Player('player', {
        videoId: 'RVRlV53TjzY',
        playerVars : {
            theme  : 'light',
            color  : 'red',
            iv_load_policy : 3,
            modestbranding: 1,
            disablekb: 1,
            showinfo: 0,
            controls: 0,
            autoplay: 1,
            fs:0
        }
    });
};

使用此结构，YouTube播放器会加载div，ID为“播放器”。 除了加载YouTube播放器，我还想在播放器包装器上绑定mousemove事件。在移动此容器的鼠标时，我想通过YouTube播放器向用户显示一些消息。

我正在尝试这样做：

$("#player-wrapper").bind('mousemove', function() {
    console.log("You are viewing YouTube Video ");
});

我看到，当加载YouTube播放器时，我没有在播放器包装器上获得此鼠标移动事件。 我尝试用普通的HTML5视频标签替换YouTube播放器。有了这个，我开始接受mousemove事件。还研究了这些元素的z-index属性，但无法弄清楚发生了什么。

请帮忙。

感谢。