Javascript 模式未关闭视频的嵌入式iframe

我有一个视频在我的页脚这是使用我的外部CSS文件，工作良好

但当我真的把它添加到项目中时，除了关闭视频之外，它还能做任何事情。按下页脚中的播放按钮后，一个模式填充屏幕，但显然不是整个屏幕

但当我单击关闭时，模态关闭，但iframe不关闭

这是我的密码

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>

JS

.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;
}

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

尝试使用：

display: none
// and
display: block

而不是

visibility: hidden
// and
visibility: visible

我在这里更新了演示：

---

我忘了是什么激发了原始代码。但我想知道他们是否使用了

visibility:hidden

而不是

display:none

来尝试预加载内容。嗯，我不确定，但我认为你知道如何保持它的可见性：hidden并使其工作？我正在实施你的解决方案。至于预加载，我已经用其他类解决了这个问题。但我只是好奇是什么导致人们使用最初的解决方案，但这不是什么大不了的事。是的，也许我以前都没有意识到这一点。