使视频在文本块旁边的英雄中保持宽高比

Question

我有两列英雄。一个拥有文字，另一个拥有从YouTube嵌入的带有iframe的视频。视频应始终保持其比例，并规定文本块的大小。没有撒谎，我以为这很容易，但是...关于如何解决它的任何想法？能做到吗我要去IE11。

也在jsfiddle播放（作为视频播放不收录）

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.hero {
  display: flex;
  flex-wrap: nowrap;
}

.hero__content {
  flex: 1;
  background-color: deeppink;
}

.hero__media {
  flex: 1;
  flex-grow: 2;
  background-color: deepskyblue;
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  max-width: 950px;
  width: 100%;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<section class="hero">
  <div class="hero__content">
    <h2>This is a awesome movie!</h2>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos excepturi molestiae rerum commodi animi, qui vel esse hic facilis facere!
    </p>
  </div>

  <div class="hero__media video-embed">
    <iframe src="https://www.youtube-nocookie.com/embed/ue80QwXMRHg?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</section>

Answer 1

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

.hero {
  display: flex;
  flex-wrap: nowrap;
  background-color: deeppink;
}

.hero__content {
  flex: 1 0 150px;
}

.hero__media {
  flex: 1 1 auto;
  background-color: deepskyblue;
}

.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  max-width: 950px;
  width: 100%;
}

.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<section class="hero">
  <div class="hero__content">
    <h2>This is a awesome movie!</h2>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos excepturi molestiae rerum commodi animi, qui vel esse hic facilis facere!
    </p>
  </div>

  <div class="hero__media video-embed">
    <iframe src="https://www.youtube-nocookie.com/embed/ue80QwXMRHg?rel=0&amp;showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</section>

Fiddle