Modal not closing the embedded iframe of a video

Question

I have this demo of a video in my footer which is using my external CSS files and works fine.

But when I actually added it the project, it will do everything other than close the video. After pressing the play button in the footer, a modal fills the screen but apparently not the entire screen.

But when I click to close, the modal closes but not the iframe

Here is my code

HTML

<div class="homepage-video">
  <div class="hv-container">
    <div class="hv-player">
      <h3>BruxZir Hammer Test</h3>
      <p>Watch how it holds up to a hammer</p>
      <a href='#' onclick='overlay()'>
        <span class="hv-play">
          <i class="fa fa-play"></i>  
        </span>
      </a>
    </div>
  </div>
</div>


<div id="overlay">
  <div class="featured-video">
    <a href='#' onclick='overlay()'>
      <i class="fa fa-times-circle-o"></i>
    </a>

    <iframe src="//player.vimeo.com/video/88944978" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

CSS

.homepage-video { background-color: black; }
.homepage-video { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/lab-interior.jpg'); }
.homepage-video {
  background-position: center -60px;
  background-repeat: no-repeat;
}
.homepage-video { background-size: cover; }

.hv-container {
  background-color: rgba(30,30,4, 0.6);
  min-height: 240px;
  position: relative;
}
.hv-player {
  width: 320px;
  max-width: 100%;
  margin: 0 auto;
  position: absolute;
  top: 30px;
  left:0; right: 0;
  padding-top: 20px;
  text-align:center;
}
.hv-player, .hv-player h3, .hv-play { color: #f4f3f3; }
.hv-play {
  border: 3px solid #fff;
  cursor:pointer; 
  padding: 4px 18px;
  border-radius: 13px;
  font-size: 30px
}

/* reset for IE*/
body { height:100%; margin:0; padding:0; }
/* code */
#overlay {
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  width:100%;
  height:100%;
  z-index: 1000;
}

#overlay { background-color: #222;}
/* must have these resets */
html, body{ height: 100%; padding: 0; margin: 0;}

/* code begins*/
.featured-video { height: 100%; width: 100%; }
.featured-video iframe {
  height: 100%;
  width: 100%;
  margin-right: auto; 
  margin-left: auto;
  vertical-align: middle; 
}
#overlay i {
  color: #999;
  font-size: 48px;
  margin: 10px;
}

JS

function overlay() {
  el = document.getElementById("overlay");
  el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

Answer 1

Try using:

display: none
// and
display: block

instead of

visibility: hidden
// and
visibility: visible

Ive updated the demo here:

http://codepen.io/anon/pen/tBKnc