流体视频高度

Posted 2023-03-06

【中文标题】流体视频高度

【英文标题】：Fluid video height

【发布时间】：2013-03-25 12:40:00

【问题描述】：

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

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

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

【问题讨论】：

看看这个答案.. ***.com/a/26198291/1922144

【参考方案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 */

【参考方案2】：

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