Неправильная высота youtube-iframe внутри элемента flexbox

Я не понимаю, почему это не работает на MS Edge 15/16 (работает на Edge 17):

<div class="row">
  <div class="video">
    <iframe src="https://www.youtube.com/embed/xcJtL7QggTI?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

scss

.row {
  display: flex;
  flex-flow: row wrap;
  .video {
    display: flex;
    order: 1;
    flex: 1 1 auto;

    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
    overflow: hidden;

    iframe {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }
  }
}

CodePen: https://codepen.io/alfredbez/pen/MqaLbY?editors=1100
Сообщение в блоге: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Вот как это выглядит в Edge 15:

Вот как это выглядит в Chrome: