响应式 Vimeo DIV 通过滚动嵌入到页面 80% 宽度

Question

如何使 Vimeo 的响应式视频嵌入代码适合设置为 80% 宽度的容器 div？尽管我尝试过，但我一直无法调整尺寸以满足我的需要。我正在寻找一种解决方案，使视频在所有设备上都能良好响应，包括台式机、高清电视和移动设备。目前，代码将视频大小设置为 100%，但我希望在将其放置在容器 div 中时保持其响应能力。有什么建议吗？

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/#####?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" ></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

我找到了另一篇文章，请参阅responsive vimeo

当我尝试这种技术时，它仍然将整个视频全宽放在桌面上，它根本不会减少宽度。响应式容器没有足够的空间容纳视频下方的按钮。这是上面文章中声称可以解决此问题的代码：

.video
{
  position: relative;
  padding: 56.25% 0 0 0;
}
.video iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 992px)
{
  .video iframe
  {
    width: 50%;
  }
}

<div class="video">
  <iframe src="https://player.vimeo.com/video/#?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Neck Flexion Test">
  </iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

我又尝试了一件事：将另一个标签放置在容器外部，并将该标签设置为屏幕宽度的 80%，但是当我这样做时，它将按钮及其下方的所有文本放置在主视频后面，这是无法使用的。

当我将视频放入另一个容器中时，例如：

<div style="
                position: absolute;
                height: 80%; 
                width: 80%; 
                top: 10%; 
                left: 10%; 
">

### above vimeo code 

</div>

所以我陷入困境......目前，我没有解决方案将视频放置在屏幕宽度的 80% 并在其下方有一个按钮。预先感谢您的帮助。

Answer 1

您已使用位置：绝对！这将从页面的自然流程中删除 div！

尝试就地使用它：

<div style="position:relative; width:80%; margin:10% auto 0;">
... your vimeo responsive embed code...
</div>

这应该像这个示例一样完美工作：https://jsfiddle.net/gp1jo6Lt/