如何在 html 中保留嵌入 vimeo 的纵横比？答案

【问题标题】：How to preserve aspect ratio embedding vimeo in html?如何在 html 中保留嵌入 vimeo 的纵横比？
【发布时间】：2017-04-21 14:44:29
【问题描述】：

我试图将比例保持在 16:9，但并非所有视频都是 1920x1080。两个是 - 1920 x 1012 和 1000 x 416。当我尝试将它们嵌入到 html 文件中时，图像会失真（额外的黑框空间或被截断）。

【问题讨论】：

欢迎来到 SO。请查看the tour。您可能还想查看How to ask a good question，以及如何创建Minimal, Complete and Verifiable example。发布您尝试过的代码和您收到的错误。尽可能具体，因为它会导致更好的答案。您可以使用此question checklist 以确保您的问题没有遗漏任何重要内容。
你看到了吗？现在是一个问题。你的版本很垃圾。

【解决方案1】：

如果您的某些源视频不是 16:9 的宽高比，但您希望嵌入式 Vimeo 播放器的大小保持 16:9 的比例，您会看到信箱效果或一些失真。

您可以在嵌入代码中更改iframe 的width 和height 属性以调整播放器本身的大小以满足您的需求，但是从使用不同的参数来看，Vimeo 似乎会保留原来的尺寸并在适当的地方添加黑条。

【讨论】：

您好，感谢您的回复。因此，如果我只使用 iframe 编码 - 并摆脱 16:9 的纵横比代码.. 我的 vimeo 嵌入不会填满全屏 - 例如：ryanstaake.com
@Lauren 您是否希望始终填满整个屏幕宽度？如果是这样，您可以将宽度属性更改为width="100%。
对于我使用的 ryanstaake.com 示例：code } .inner iframe { width: 100%;高度：100%；位置：绝对；顶部：0；左：0； } 在我的 CSS 但它仍然不适合移动/网络浏览器的宽度：/
Lauren，您可能想查看 Embed Responsively：embedresponsively.com 另外，我建议减少您在单个页面上的嵌入数量，因为内存有限的设备和浏览器将无法加载页面。