父集div使用relative定位，padding-bottom值充当空间，子集video元素absolute定位

具体例子如下，比如视频是16:9的比例，这样比例就不会变了，并且适配div的等高比例

css

.vid-wrapper{
width:100%;
position:relative;
padding-bottom:56.25%;    /*需要用padding来维持16:9比例,也就是9除以16*/
height: 0;
}
.vid-wrapper video{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%
}
html

<div class=”vid-wrappper”>
<video src=””><ideo>
</div