问基金会的“响应式嵌入”视频出现在覆盖的顶部-为什么？

EN

<div class="overlay">
</div>

<div class="grid-x grid-padding-x">

  <div class="small-6 cell">
    <div class="responsive-embed widescreen">
      <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

<div class="overlay--blue"></div>


.overlay {
  position:absolute;
  height:100vh;
  width:100vw;
  display:flex;
  background: red;
  top:0;
  left:0;
}

.overlay--blue { 
  position:absolute;
  height:50vh;
  width:100vw;
  display:flex;
  background: blue;
  top:0;
  left:0;
}