Question

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

我想解决的问题是调整<video>的父div的高度，同时保持父div width:100%，这样父亲总是与{{1}相同的比例初始加载和调整大小。

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

我还在学习JS而且没有精明的解决方法。提前谢谢。

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

Answer 1

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

您可以计算容器的填充如果您知道视频的比例，然后将视频完全置于其中。我已经调整了你的小提琴来使用这种技巧：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%;
}

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

1 个答案: