如何解决如何在HTML中制作自适应视频?
所以我搜索了如何使用CSS使HTML响应视频,但是它不起作用。请帮助
这是我的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;
}
解决方法
我将从width
标记中删除height
和video
属性,并且(如果视频的大小不超过那些属性值所指定的),则引入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;
}
如果容器> =大于540px,则视频宽度将为540px,当容器小于540px宽度时,视频将变为全角。两种情况下,身高都会自动调整比例。
无论如何,如果您的视频 大于指定的大小,则应使用原始大小宽度作为CSS中max-width
的值。这样,CSS允许的尺寸就可以达到原始尺寸(但不能大于原始尺寸,这会导致质量下降)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。