Javascript 悬停时插入YouTube iframe

我想在用户悬停在div上时插入iframe，但它似乎不起作用。它在没有悬停事件的情况下工作得很好，但在悬停时不起作用

html:

js:

小提琴：

---

您不需要在事件处理程序中声明onyoutuberready函数。一旦加载了脚本，就会调度该事件，这毫无意义。相反，您只需在悬停中构造播放器

$(".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
    }
});

.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
    }
});

$(".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
    }
});