如何在 html 中制作响应式视频？

Question

所以我在 html 和 css 中搜索了如何使视频响应，但它不起作用。请帮忙

这是我的HTML

<div class="container">
   <video width="540px" height="320px" controls src="Videos/Video.mp4"></video>
</div>

这是css

.container {
  width: 100%;
}
video {
  height: auto !important;
  width: 100% !important;
}

Answer 1

我会从 video 标签中删除 width 和 height 属性，并且（如果视频不大于这些属性值指定的大小）引入 max-width CSS 规则中的设置：

<div class="container">
   <video controls src="Videos/Video.mp4"></video>
</div>



.container {
  width: 100%;
}
video {
  height: auto;
  width: 100%;
  max-width: 540px;
}

如果容器大于等于 540 像素，这将使视频宽度为 540 像素，当容器宽度小于 540 像素时，视频将变为全宽。在这两种情况下，高度将根据比例自动调整。

无论如何，如果您的视频比指定的大，您应该使用原始尺寸宽度作为 CSS 中 max-width 的值].这样 CSS 将允许尺寸达到原始尺寸（但不能更大，这会导致质量差）

如何在 html 中制作响应式视频？

How to make responsive video in html?

html

css

video

responsive-design