Растягивание встроенного видео, сохраняя его соотношение сторон в дочернем элементе flex

#css #flexbox #video-streaming #responsive

Вопрос:

Как растянуть встроенное видео так, чтобы оно полностью заполнило зеленое поле, сохранив при этом соотношение сторон?

введите описание изображения здесь

 * {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
}

.flex-item-left {
  background-color: lightgreen;
}

.flex-item-right {
  background-color: dodgerblue;
  flex: 1;
  display: flex;
  justify-content:center;
  align-items:center;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media (max-width: 400px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
} 
 <div class="flex-container">
  <div class="flex-item-left">
        <div class='embed-container'>
      <iframe src='https://player.vimeo.com/video/436720811' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>      
    </div>
  </div>
  <div class="flex-item-right">
        <span>
    <h3>Video Title</h3>
    <p>Video Description</p>
    <button>go to product</button>
      <span>
  </div>
</div> 

Желаемый результат:
введите описание изображения здесь