Stop video when closing modal

// Get the modal
var modal = document.getElementById('myModal');

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

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

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
  jQuery('header').css('display', 'none');
}

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

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

body {
  background: #ccc
}

@media only screen and (max-width: 800px) {
  #embed-container-desk {
    position: relative;
    padding-bottom: 130%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
  }
}

@media only screen and (max-width: 400px) {
  #embed-container-desk {
    position: relative;
    padding-bottom: 350%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
  }
  #tache {
    padding-top: 140px !important;
  }
}

#myBtn {
  padding: 20px 25px 20px 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #fff;
  border: 1px solid #fff;
  background-color: rgba(255, 255, 255, 0.01);
  margin-top: 28px;
}

#myBtn:hover {
  padding: 20px 25px 20px 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #000;
  border: 1px solid #cddc2a;
  background-color: #cddc2a;
  margin-top: 28px;
}

#myModal {
  width: 100%;
  height: 100%;
  z-index: 900;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed !important;
  /* Stay in place */
  z-index: 101;
  /* Sit on top */
  left: 0px;
  top: -20px;
  overflow: auto;
  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 */
  -webkit-animation-name: fadeIn;
  /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}


/* Modal Content */

.modal-content {
  position: center;
  bottom: 0;
  background-color: #fefefe;
  width: 100%;
  height: auto;
  margin: auto;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s
}


/* The Close Button */

.close {
  color: #cddc2a;
  /*float: left;*/
  font-size: 20px;
  font-weight: bold;
  padding-top: 0px;
}

.close:hover,
.close:focus {
  color: #fff !important;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  width: 100%;
  height: auto;
}

.modal-footer {
  background-color: #000;
  color: white;
}


/* Add Animation */

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

.embed-container {
  position: relative;
  padding-bottom: 95%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#tache {
  padding-top: 40px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">VIEW VIDEO</button>

<!-- The Modal -->
<div id="myModal" class="modal" width="100%">

  <!-- Modal content -->
  <div class="modal-content" style="background-color:#000;">
    <div class="modal-header" style="background-color:#000;">
      <span 
        class="close" id="span-close"><i 
        class="far fa-times-circle"  id="tache"></i></span>
    </div>
    <div class="embed-container" id="embed-container-desk">
      <iframe 
        src="https://player.vimeo.com/video/158196905?title=0&byline=0&portrait=0"
        width="640" height="340" frameborder="0"
        webkitallowfullscreen mozallowfullscreen
        allowfullscreen style="top:-350px;"></iframe>

    </div>


  </div>

</div>