Vimeo 嵌入居中对齐

Question

我正在尝试在页面中心（水平和垂直）对齐嵌入的 vimeo 视频（iframe）。但我需要在保持纵横比 (16:9) 的窗口大小的情况下增加或减少视频比例。

在这里我做了一个我想要的小插图（大 GIF）：

正确https://vk.com/doc199484568_437482326

错误的https://vk.com/doc199484568_437482328

我尝试使用脚本 Fitvids.js，但它对我没有帮助。 我很乐意通过任何方法看到解决方案。感谢您的回答！

Answer 1

我为响应式 youtube 视频保存了这个 CSS sn-p，但不确定我从哪里得到它。也许它可以帮助你。您在 iframe 周围放置一个带有“videoWrapper”类的 div，然后使用下面的 CSS 定位它。

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}