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/

您要查看的视频是“Board Basement”下面的3/4页面 - 有关如何解决此问题的任何想法？

谢谢！

Answer 1

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

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

关闭jQuery Overlay并停止视频

1 个答案: