Question

html5的video标签如何拉伸视频，使其变形并且适配div宽高比例？

Answer 1

父集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=""></video>
</div

Answer 2

在标签内增加style="width:(你要求的宽度)px; height:(你要求的高度)px;"，注意符号都是英文的

Answer 3

使用以下代码即可
<div style="width:400px;height:400px;">
<video src="/i/movie.ogg" width="100%" height="100%" controls="controls">
</video>
</div>

Answer 4

有宽高度设置啊

Answer 5

直接用object-fit: fill;
如果是动态创建的
元素.style.objectFit = "fill"