Question

我想在用户将鼠标悬停在div上时插入iframe，但它似乎正在工作。它在没有悬停事件但没有on hover函数的情况下运行良好。

HTML：

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

的CSS：

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

JS：

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

小提琴： 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

在悬停时插入YouTube iframe

1 个答案: