视频模式应该占据窗口的高度太高的全高度

Question

目标
有一个占据整个宽度和高度但不需要滚动的模态。

问题
视频控件太低并强制滚动。我希望默认视频处于全高，不少，不再是。

当前状态
我有这个demo on codepen。

当您单击模态（通过按播放图标）时，由于顶部条的高度具有关闭模态的按钮，因此按下视频的模态控制。但由于某种原因，我无法真正改变顶栏的高度。

代码

HTML

<div class="homepage-video">
  <div class="hv-container">
    <div class="hv-player">
      <h3>Snowboarding Italy</h3>
      <p>Check out our latest video</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/17812340?color=2AD041" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>

CSS

.homepage-video {
  background-color: black; 
  background-size: cover;
  background-repeat: no-repeat;
}

.homepage-video {
  background-image: url('http://37.media.tumblr.com/7aaf860fb237c4322c9c8f35a3f41350/tumblr_mui2rf7PAp1r59v3fo1_1280.jpg'); 
  background-position: center -60px; 
}

.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 {
  display: none;
  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;
}

html, body{ height: 100%; padding: 0; margin: 0;}

JS

function overlay() {
  el = document.getElementById("overlay");
  el.style.display = (el.style.display == "block") ? "none" : "block";
}

Answer 1

我不确定您希望实现什么样的布局，但从您的评论来判断，将<a>元素放在.featured-video内绝对是个好主意。 z-index不起作用的原因是因为你没有在所述元素上声明相对或绝对位置（z-index不适用于position: static，这是默认值。）

此外，顶部空格似乎来自您的layout.css文件，该文件为.featured-video指定了36px的上边距。通过声明该元素的零保证金可以部分解决问题：

.featured-video {
  height: 100%;
  width: 100%;
  margin: 0;
  position: relative;
}

您可以看到我还添加了position: relative属性，以便我们可以将结束按钮完全放在其中：

.featured-video a {
  background-color: rgba(0,0,0,.5);
  display: block;
  position: absolute;
}

请参阅更新的codepen：http://codepen.io/terrymun/pen/bplhI