CSS3及Javascript实现网页视频背景居中并自动拉伸
以下是实现网页视频背景居中并自动拉伸至完全覆盖的代码示例：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Background</title>
<style>
html, body {
height: 100%;
margin: 0;
}
.video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
</style>
</head>
<body>
<video class="video-background" autoplay loop muted playsinline>
<!-- 在这里放置你的视频文件路径 -->
<source src="your-video-file.mp4" type="video/mp4">
</video>
</body>
</html>请替换your-video-file.mp4为你的视频文件路径。这段代码将确保视频背景始终居中并且自动伸缩至完全覆盖整个网页。
评论已关闭