javascript - Hover or mouseover on youtube embedded player -

I have an embedded YouTube player and I would like to trigger some actions when a user captures or leaves a mouse on the player Ho player I can not seem to do this

  & lt; Script & gt; // Load asynchronous asphrame player API code. Var tag = document.createElement ('script'); Tag src = "https://www.youtube.com/player_api"; On firstScriptTag = document.getElementsByTagName (such as script ') [0]; FirstScriptTag.parentNode.insertBefore (tag, firstScriptTag); // a & lt; Iframe & gt; Replace the 'ytplayer' element with and download the Youtube Player API code after Var player; Function onYouTubePlayerAPIReady () {player = new YT.Player ('ytplayer', {height: '390', width: '640', video ID: 'M7lc1UVf-VE'}); } $ ('# Ytplayer') Hover (function () (warning ('hover');}, function () {warning ('hover out');}); $ ('# Ytplayer') Mouseover (function () {warning ('mouseover');}) & lt; / Script & gt; & Lt; Body & gt; & Lt; Div id = "ytplayer" & gt; & Lt; / Div & gt; & Lt; / Body & gt; JSFiddle:  
 I also tried to make a divas to cover the player, but there was no work to do this.  
 JSFiddle:  
 Having a cover division on the YouTube player makes any mouse action a player that looks like it seems. I thought it was because of my Jade index criteria. However, when 'ytplayer' div is set to z-index 20 and 'cover' div in 10, it still happens.   
 
 
 Please take a look at your JSField:  
  & lt; Script & gt; $ (Function () ($ ('function'). Hover (function () {alerts ('hover');}, function () {warning ('hover out');})}})