javascript - 基于 HTML5 视频分辨率的动态父 div 宽度和高度

Question

我有一个响应式设计的网站，其中的 HTML5 视频占据了整个浏览器的宽度。视频的 CSS 有 width:100%;height:auto;无论浏览器窗口的大小如何，都能保持视频分辨率。

我想解决的问题是调整<video>的高度的父 div，同时保留父 div 的 width:100%所以 parent 总是与<video>相同的比例在初始加载和调整大小时。

视频为 640x360。假设浏览器窗口是 1280x800。视频分辨率将增加一倍，达到 1280x720 以适应其 100% 的宽度，但由于窗口的高度为 800，父 div 的高度将增加 80 个像素。我想将该 div 的高度调整为 720 以匹配 <video> .

我还在学习 JS，没有解决这个问题的智慧。提前致谢。

这是一个可能有助于我解释的 fiddle (调整窗口大小以复制问题。目标是在调整窗口大小时不显示任何红色背景): http://jsfiddle.net/alanweibel/UMstP/2/

Answer 1

假设我对您的理解是正确的，本文介绍了一个小技巧，您可以使用它在没有 Javascript 的情况下实现这一点:http://webdesignerwall.com/tutorials/css-elastic-videos

如果您知道视频的比例，则可以计算容器的填充，然后将视频绝对定位在其中。我已经调整了你的 fiddle 以使用这种技术:http://jsfiddle.net/SeykC/

<div class="wrap">
    <div class="container">
        <video id="video" controls="controls">
            <source type="video/mp4"
                    src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
        </video>
    </div>           
</div>
​

video {
    max-width: 100%;
    height: auto;
}

.container {
    background: red;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.container iframe,  
.container object,  
.container embed,
.container video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}​