在DIV容器中制作动态高度的响应式视频背景可以通过以下步骤实现:
以下是一个示例代码:
HTML:
<div class="video-container">
<video id="background-video" autoplay loop muted>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<div class="content">
<!-- 其他内容 -->
</div>
</div>
CSS:
.video-container {
position: relative;
width: 100%;
min-height: 300px;
}
#background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
position: relative;
z-index: 1;
/* 其他样式 */
}
/* 媒体查询 */
@media screen and (max-width: 768px) {
.video-container {
min-height: 200px;
}
}
JavaScript:
window.addEventListener('resize', function() {
var video = document.getElementById('background-video');
video.style.height = video.offsetWidth * 9 / 16 + 'px';
});
在这个示例中,DIV容器的类名为"video-container",视频元素的id为"background-video",其他内容可以放在名为"content"的子DIV中。CSS样式中设置了DIV容器的宽度为100%,最小高度为300px,视频元素的宽度和高度为100%,并使用object-fit属性来保持视频的比例和填充整个容器。媒体查询部分根据屏幕宽度小于768px时,调整DIV容器的最小高度为200px。JavaScript部分监听窗口大小变化事件,并根据视频元素的宽度重新计算和调整视频元素的高度,以保持响应式效果。
对于腾讯云相关产品和产品介绍链接地址,可以根据具体需求选择适合的云服务,例如腾讯云的视频处理服务、CDN加速服务等。具体的产品和链接地址可以参考腾讯云官方文档或咨询腾讯云的客服人员。
领取专属 10元无门槛券
手把手带您无忧上云