Cacher is the code snippet organizer for pro developers

<a href="#" id="play-modal">
	<i aria-hidden="true" class="fa fa-play-circle"></i>
</a>


<div id="modal">
   <div class="esc"><i class="fa fa-times-circle-o" aria-hidden="true"></i></div>
   <iframe class="modal-video" src="" frameborder="0"></iframe>
</div>

#modal {
	max-width: 100%;
	width: 800px;
	height: 450px;
	position: fixed;
	top: -50%;
	opacity: 0;
	left: 50%;
	background: black;
	z-index: 99999;
	transition: all .33s ease;
	.esc {
		width: 100%;
		text-align: center;
		position: absolute;
		top: -70px;
		left: 0;
		i {
			cursor: pointer;
			font-size: 50px;
			color: white;
			transform: rotate(0deg);
			transition: all .33s ease;
			&:hover {
				transform: rotate(90deg);
			}
		}
		
	}
	iframe {
		width: 100%;
		height: 100%;
	}
	&.active {
		top: 250px;
		opacity: 1;
	}
}

   jQ171(document).ready(function($){
     $("#play-modal").on("click", function() {
        var theVideo = "https://player.vimeo.com/video/356735640?autoplay=true";
        $("#modal, .body-overlay").addClass("active");
        $(".modal-video").attr("src", theVideo);
     })
     $(".body-overlay").on("click", function() {
        $(".modal-video").attr('src', "");
        $("#modal").removeClass("active");
     })
     $(".esc").on("click", function() {
        $("#modal, .body-overlay").removeClass("active");
        $(".modal-video").attr('src', "");
     })

     // center, sans blur
     $(window).on("resize load", function() {
         $("#modal").css("margin-left", "calc(-"+($("#modal").outerWidth())+"px/2)");
      });
      //close alert when clicking the esc keyboard button
      $(document).keyup(function(event){
          if(event.which=='27'){
             $('#modal').removeClass('active');
               $('body').removeClass('locked');
               $(".modal-video").attr("src", "");
          }
       });
   });