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

我有一个响应式设计网站，其HTML5视频占用了完整的浏览器宽度。视频的CSS具有width:100%;height:auto;，无论浏览器窗口的大小如何，它都可以保持视频分辨率。基于HTML5视频分辨率的动态父div宽度和高度

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

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

我仍然在学习JS，并没有解决这个问题的能力。提前致谢。

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

来源

2012-11-25 Alan Weibel

假设我已经明白您正确，本文介绍了一个小窍门，你可以用它来做到这一点不使用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%; 
}

来源

2012-11-26 08:56:52 polarblau

这工作完美。很好找，谢谢。 –

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

回答

相关问题