2

I don't understand why this does not work on MS Edge 15 / 16 (works on 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
Blog-Post: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

This is how it looks in Edge 15: screenshot-edge

This is how it looks in chrome: screenshot-chrome

Alfred Bez
  • 1,191
  • 1
  • 14
  • 31
  • Just wanted to point out that in the past I normally find issues while utilizing iFrames for universal cross browser compatibility. Maybe check this answer out, perhaps it could guide you in the right direction for Edge: https://stackoverflow.com/a/34096275/8382028 – ViaTech Aug 24 '18 at 13:19

0 Answers0