要使HTML背景视频高度小,宽度100%,可以通过以下步骤实现:
<video autoplay loop muted poster="poster.jpg" id="bg-video">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
#bg-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: -1;
}
#bg-video {
/* 设置固定高度 */
height: 300px;
/* 或者使用transform属性缩放 */
transform: scale(0.5);
}
#bg-video {
/* 设置视频位置为居中 */
left: 50%;
transform: translateX(-50%);
/* 设置视频填充方式为cover */
object-fit: cover;
}
这样就可以实现HTML背景视频高度小,宽度100%的效果。
关于腾讯云相关产品,推荐使用腾讯云的云点播(VOD)服务来存储和播放视频文件。云点播是腾讯云提供的一站式音视频解决方案,具有高可靠性、高并发、低时延的特点。您可以通过腾讯云云点播产品介绍页面了解更多信息:腾讯云云点播
领取专属 10元无门槛券
手把手带您无忧上云