流体视频高度

Question

我找到了 fluidvids.js 并在我的网站上使用它，但它只考虑宽度。我有一些用户的浏览器具有更多的全景、窄高度视口，并且看不到我的视频上的控件，因为窗口太宽（900 像素）以至于视频宽度无法随高度缩放。我想要响应高度，并查看了 AListApart 等上的几篇帖子，但找不到明显的解决方案。如果您有任何提示或看到我遗漏的明显之处，请告诉我。

刚刚学习 CodePen，但我与所有 js 的相关链接似乎使这有点复杂（抱歉）。

这是链接：http://chrisphoto.com/masters2/index.html#chapter-2

Answer 1

对于 Vimeo 和 Youtube 视频，将 iframe 包装在一个 div 中，为其提供一个“video_wrapper”类

.video_wrapper{
    margin: 82px auto; 
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0; width: 80%;
}

.vdo_span iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%; /* Adjust height to your own need */
}

Answer 2

在这里，您可以在 responsive videos in CSS 上获得一些 awesome tricks，也可以在 youtube iframe 上获得。