流体视频高度 [英] Fluid video height

问题描述

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

I found fluidvids.js and am using that on my site, but it only accounts for width. I have some users who have more of a panoramic, narrow height viewport for their browser, and can't see the controls on my video because the window is so wide (900px) that the video width doesn't scale for the height. I'd like to have responsive height, and have looked at several posts on AListApart, etc, and can't find the obvious solution. Let me know if you have any tips or see the glaring thing I'm missing.

刚刚学习CodePen，但我与所有js的相关链接似乎使得有点复杂（对不起）。

Just learning about CodePen, but my relative links to all the js seems to make that a little complicated (sorry).

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

推荐答案

对于Vimeo和Youtube视频，将iframe擦拭为div，给它一个类video_wrapper

For both Vimeo and Youtube videos, wrape the iframe in a div giving it a class "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 */
}

这篇关于流体视频高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！