javascript - 关闭 jQuery Overlay 并停止播放视频

Question

根据 this question我想关闭叠加层并停止正在播放的视频。

我的代码是:

<div id="video_pop_1" class="video_pop_1" style="display:none;">
    <div class="video_close" id="video_close">
        <img src="/wp-content/themes/volo/images/cross.png" alt="Volo Multi Channel eCommerce Inventory Management Software" title="Volo eCommerce 2015 copyright" width="50" height="50" alt="close">
    </div>
</div>

$('#imageID').click(function() {
    $('#video_pop_1').show();
    $('#video_pop_1').append('<div class="video_close" id="video_close" style="z-index:9999;"><img src="/wp-content/themes/volo/images/cross.png" alt="Volo Multi Channel eCommerce Inventory Management Software" title="Volo eCommerce 2015 copyright" width="50" height="50" alt="close"></div><iframe width="80%" height="80%" id="video" src="//www.youtube.com/embed/uEQ8wTXjklw?autoplay=1" frameborder="0" allowfullscreen wmode="Opaque" class="vid_pop_player"></iframe>');

    $('.video_close').click(function() {
        $(".video_pop_1").fadeOut(300);
    });
});

一切正常，现在发生的只是视频继续在后台播放 - 如何停止视频播放？

https://www.volocommerce.com/ebay-targeted-campaign/

您要观看的视频是页面下方 3/4 处“Board Basement”下的视频 - 关于如何解决这个问题的任何想法？

谢谢!

Answer 1

视频继续播放，因为它实际上只是被淡出隐藏了。要停止它，您可以从 DOM 中删除附加的 HTML。为此，您可以使用 fadeOut() 动画的回调。试试这个:

$('.video_close').click(function() {
    $(".video_pop_1").fadeOut(300, function() {
        $(this).empty();
    });
});