流体视频高度

Question

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

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

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

Answer 1

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

Answer 2

对于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 */
}