Cacher is the code snippet organizer for pro developers

<button class="videobtn" id="video-btn">    
  <div class="video">
    <a>Play Video</a>
  </div>
</button>

<!-- Place modal content in the footer -->

<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    <iframe id= "video" class="modal-video" width="560px" height="315px" src="https://www.youtube.com/embed/ZTN-6NRHqtA?&rel=0&api=1&amp;version=3"></iframe>
  </div>

</div>

.videobtn {
    width: 100%;
    border: none;
    cursor: pointer;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9000; /* 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.7); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {    
    z-index: 9000;
    position: relative;
    .modal-video {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
.video-modal{
	max-width: 700px;
	margin: 10% auto 0;
}

/* The Close Button - Style accordingly*/
.close {
    height: 40px;
    width: 40px;
    text-align: center;
    position: absolute;
    bottom: -60px;
    right: -20px;
    margin-right: 50%;
    display: flex;
}

.close:hover,
.close:focus {
    text-decoration: none;
    cursor: pointer;
    transition: all .25s;
    
}

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

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

// 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).on('click', function(){
		modal.style.display = "block";
		$('#video').attr('src', "https://www.youtube.com/embed/ZTN-6NRHqtA?&rel=0&api=1&amp;version=3");
      });

// Modal open/close
	var $modal = $('.modal');

$('.modal').on('click', function(event){
		if( $(event.target).is($modal) || $(event.target).is('.close') ) {
			//stop videos
			  $('.modal-video').each(function(index) {
        $(this).attr('src', '');
        return false;
        });
        }

       modal.style.display = "none";
	});