Stop Playing Video When I Close The Lightbox

I built a popup using this article and it looks really good.

Here is what I did:

<button id="open-popup">Play</button>

<div id="popup-box" class="modal">

  <div class="popup-content">
    <span class="close">&times;</span>
    <p>[vimeo shortcode]</p>
  </div>

</div>

Here is the css

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.popup-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

And here is the JS

(function($) {          
$(document).ready(function(){

// Get the modal
var modal = document.getElementById('popup-box');

// Get the button that opens the modal
var btn = document.getElementById("open-popup");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

});
})(jQuery);

When I click on the button it's working perfectly, it's centered and looks really good.

The problem is that, when I close the popup the video audio is still playing in the background.

I would like the video to stop when I close the popup.

Any help will be amazing.

Thank you

You have to remove the Vimeo content thus stopping the audio completely. If not that, you would have to use Vimeo API to stop/pause/play the video.

Here a demonstration of how it can be done, adding an iFrame as HTML content for #popup-box .popup-content and then setting the HTML to an empty string to remove it.

(function($) {          
    $(document).ready(function(){
		 
         var iframe = '<iframe src="https://player.vimeo.com/video/213100067?title=0&byline=0&portrait=0&badge=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
        
         // When the user clicks on the button, open the modal 
         $("#open-popup").on('click', function(e) {
             e.preventDefault();
             $('#popup-box').show();
             $('#popup-box .popup-content').html(iframe);
         });
        
         // When the user clicks on <span> (x), close the modal
         $('#popup-box .close, #popup-box').on('click', function() {
            $('#popup-box').hide();
            $('#popup-box .popup-content').html('');
         });

    });
})(jQuery);

/* The Modal (background) */
.modal {
    display:none;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.popup-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open-popup">Play</button>

<div id="popup-box" class="modal">
	<span class="close">&times;</span>
	<div class="popup-content">
	</div>
</div>