Вставить YouTube iframe на hover

Question

Я хочу вставить iframe, когда пользователь наводил на div, но, похоже, он не работает. Он работает очень хорошо без события наведения, но не on hover.

HTML:

<div class="video_wrap"></div> 

CSS:

.video_wrap { 
    width: 320px; 
    height: 240px; 
    background: #b30054; 
} 

ЯШ:

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

tag.src = "https://www.youtube.com/player_api"; 
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 

$(".video_wrap").on({ 
    mouseenter: function() { 

     $(this).attr('id', 'curr'); 

     var player; 

     function onYouTubePlayerAPIReady() { 
      player = new YT.Player('curr', { 
       height: '240', 
       width: '320', 
       videoId: 'wJnnT1SGEsc', 
      }); 
     }; 

    }, 
    mouseleave: function() { 
     //stuff to do on mouse leave 
    } 
}); 

Fiddle: http://jsfiddle.net/508oknm7/4/

Answer 1

Вы не Объявите onyoutubeready в обработчике событий. Это событие отправляется после загрузки скрипта, это не имеет смысла. Вместо этого вы просто создаете игрока внутри зависания.

$(".video_wrap").on({ 
    mouseenter: function() { 

     $(this).prop('id', 'curr'); 

     player = new YT.Player('curr', { 
      height: '240', 
      width: '320', 
      videoId: 'wJnnT1SGEsc', 
     }); 


    }, 
    mouseleave: function() { 
     //stuff to do on mouse leave 
    } 
}); 

jsFiddle