HTML5视频拉伸固定高度

Question

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

我不需要保留原始宽高比。

这是我正在使用的代码：

<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>

另外， JSFiddle ：

有什么建议吗？

Answer 1

你很亲密，你只需要height: auto或完全删除它。关于您的宽度，如果您对扩展所需宽度有限制，可以通过max-width和min-width指定。我建议最小宽度不要小于320px，因为这是您需要支持的最小屏幕。

编辑在与OP讨论问题的具体细节后，我们已确定在 HTML5 Video Stretch 上保持固定的高度;你需要以下包装代码：

<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>

内部overflow: hidden元素保留width: 100%，height: 314px和video的位置。