Foundation's "responsive-embed' video appears on-top of an overlay - why?

I'm using Foundation and ".responsive-embed" video, I have a mobile menu overlay that sits on top. However I've discovered that if this defined before the video (like in the header) the properties that I would expect the z-index to place this overlay on top doesn't work.

I can't understand why, the same values applied after in the markup achieve the desired result. How can I make the red overlay sit ontop?

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

Try adding some z-index to your .overlay.

https://codepen.io/DanielRuf/pen/VgWaom