Vimeo iframe не отображается в верхней части div

Question

Я пытаюсь отобразить Vimeo iframe в зависимости от размера экрана.

Я написал следующее

.wrapper {
  display: flex;
  flex-wrap: wrap;
  min-height: 300px;
  border: 1px solid black;
}

.player {
  flex: 0 0 66.667%;
  max-width: 67%;
}

.lessons {
  flex: 0 0 33.33%;
  max-width: 33.33%;
  border: 1px solid black;
}

<div>
  Title
</div>
<div class="wrapper">
  <div class="player">
    <iframe src="https://player.vimeo.com/video/261210430?title=0&byline=0&portrait=0" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
  </div>
  <div class="lessons">
    Lessons
  </div>
</div>

Я хочу иметь поле, которое захватывает 2/3 ширины, и другое поле для списка воспроизведения, чтобы захватить остальные. Это не должно быть точным - но идея состоит в том, чтобы иметь плеер и плейлист, а видео-фрейм должен начинаться с вершины 0 в div.

Но, как вы можете видеть в https://jsfiddle.net/zv6Lgaq7/1/ видео не начинается сверху 0 и захватывает полный размер div.

Что я делаю не так?

Answer 1

Вот как с js

function updater() {
  fetch('https://vimeo.com/api/oembed.json?url=https://player.vimeo.com/video/261210430', {method: 'GET'})
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    const pw = document.getElementById('iframe').offsetWidth
    const h = data.height*pw/data.width

    document.getElementById('player').style.height = h+'px'
  });
}

updater()

https://jsfiddle.net/j70kquLo/

с этим лучше CSS https://jsfiddle.net/c7a0wdm5/