video 宽高自适应_HTML5的视频能不能拉伸宽度，实现自适应宽度？

展开全部

曾几何时，项目中有碰到视频比例拉伸的62616964757a686964616fe58685e5aeb931333365633864需求，但是发现这个看似再普通不过的一个需求，找遍全网至今都没有找到解决方法。因为强制给video标签设置width和height的话只会将video的显示区域拉伸，但是里面的视频还是保持原始比例，怎么调都没用：

因为当我横向拉伸时：

当我纵向拉伸时：

2016-09-21 11:15:40 更新：

感谢 @RileyRen 提醒，原来还有object-fit这一属性，把它设置为fill就满足需求了，泪奔~，这篇文章就当看个笑话吧，哎，不过可以看看我家喵星人的处女秀。

object-fit:fill;

width:800px;

height:320px;}

测试视频比例拉伸：

但是，这一属性兼容性不太好，IE全军覆没，安卓要4.4.3以上才支持：

所以我这个方法还是有一点点价值的，哈哈。

解决方法一

有人会说，既然网页上拉伸不了比例，那么直接把视频用转码工具拉伸比例然后重新转码不就是了？

没错，这就是我说的第一种解决方法，但是这对于少量视频没啥问题，如果有很多个视频，全部转码又重新上传也不太现实。刚开始我也确实是这么做的，但是后来发现还有其它方法。

解决方法二

<