时间戳

首页 > 解决方案 > Vimeo iframe 不显示在 div 的顶部

html - Vimeo iframe 不显示在 div 的顶部

问题描述

我正在尝试显示响应屏幕尺寸的 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 的完整大小。

我究竟做错了什么？

标签： htmlcssflexbox

解决方案

这里是如何使用 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/

推荐阅读