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 的宽度，另一个框用于播放列表来捕获其余部分。这不需要准确 - 但想法是有一个播放器和一个播放列表，并且视频 iframe 应该从 div 的顶部 0 开始。

但正如您在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/