Javascript 具有固定高度的HTML5视频拉伸

视频未在固定高度下全宽显示

我不需要保留原始的纵横比

以下是我正在使用的代码：

<video width="100%" height="314" autoplay loop>
    <source src="https://s3-us-west-1.amazonaws.com/lapka-assets/web_blur.mp4" type="video/mp4">
</video>

另外，a：

---

有什么建议吗？

你很接近了，你所需要做的就是将

高度：自动设置为
或将其全部删除。关于宽度，如果您对需要扩展的宽度有限制，可以通过
max width
和
min width
指定。我建议最小宽度不要小于
320px
，因为这是您需要支持的最小屏幕

编辑在与OP就问题的细节进行合作后，我们决定在上保持固定高度；您需要以下包装器代码：

<div style="overflow: hidden; width: 100%; height: 314px;">
  <video height="auto" width="100%" autoplay loop>
    <source src="https://s3-us-west-1.amazonaws.com/lapka-assets/web_blur.mp4" type="video/mp4">
  </video>
</div>



其中
溢出：隐藏
，
宽度：100%
和
高度：314px
为内部
视频
元素保留。
该解决方案不起作用。JSFIDLE：如果我将高度设置为“自动”，图像将远高于我需要的314px高度。@user5336878由于
视频
元素的性质，您需要保持一定的纵横比，这意味着无法实现您的目标（固定高度、流体宽度），请阅读以下内容：在本例中，该视频将被用作略不透明图像的抽象背景。我不需要清楚地看到它。我建议您将
video
元素包装在高度为314px的
div
中，并使用它在该高度隐藏视频。这有意义吗？我不知道怎么做。