16:9 Responsive YouTube iframe in a css grid in firefox

Question

I've made a little feature to show multiple YouTube iFrame embeds inside of a new CSS Grid layout. Each of the grid cells is using the padding-top/padding-bottom 16:9 responsive video css. See it here. Or here:

.grid {
  display: grid;
  grid-template-areas: "one one two two";
  grid-template-rows: auto;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 0px;
}
.one {
  grid-area: one;
}
.two {
  grid-area: two;
}
.grid > div {
    border: 1px solid rgba(100, 100, 100, 0.6);
    background-color: rgba(100, 100, 100, 0.3);
    position: relative;
    height: 0;
    padding-top: 56.25%;
    overflow: hidden;
}
iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="grid">
  <div class="one">
    <iframe src="https://www.youtube.com/embed/FV6cIpJrCiU" frameborder="0" allowfullscreen></iframe>
  </div>
  <div class="two">
    <iframe src="https://www.youtube.com/embed/FV6cIpJrCiU" frameborder="0" allowfullscreen></iframe
  </div>
</div>

I originally developed this in Chrome/Safari and it looks great. The only problem is, in Firefox, it seems setting { height: 0; padding-top: 56.25% } keeps the height at 0.

Has anyone experienced this? Is there a work-around?

Thanks!