1

As per this question I want to close the overlay and stop the video being played.

My code is: 

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

Which all works, all that happens now is the video continues to play in the background - how can I stop the video playing?

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

The video you want to view is the one under "Board Basement" 3/4 way down the page - any ideas on how to get around this?

Thanks!

Community
  • 1
  • 1
Dan Hawkins
  • 177
  • 12

1 Answers1

4

The video keeps playing because it's effectively only hidden by the fade out. To stop it you can remove the HTML you appended from the DOM. To achieve this you can use the callback from the fadeOut() animation. Try this:

$('.video_close').click(function() {
    $(".video_pop_1").fadeOut(300, function() {
        $(this).empty();
    });
});
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339