如何:使我的视频背景居中和缩放，而不是改变浏览器的大小？

要使视频背景居中并缩放，而不是改变浏览器的大小，可以使用CSS来控制视频的样式。以下是一个详细的示例，展示了如何实现这一效果：

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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="video-container">
        <video autoplay muted loop>
            <source src="your-video-file.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
    <div class="content">
        <!-- Your content goes here -->
        <h1>Welcome to My Website</h1>
        <p>This is some sample text.</p>
    </div>
</body>
</html>

CSS部分（styles.css）

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.video-container video {
    object-fit: cover; /* This ensures the video covers the entire container without stretching */
    width: 100%;
    height: 100%;
}

.content {
    position: relative;
    z-index: 1;
    color: white;
    text-align: center;
    padding-top: 20%;
}

解释

HTML部分:
- 创建一个包含视频的<div>元素，并为其设置一个类名video-container。
- 在<video>标签中，使用autoplay, muted, 和 loop属性来确保视频自动播放、静音并循环播放。
- 添加一个<source>标签来指定视频文件的路径和类型。

CSS部分:
- 设置body和html的高度为100%，并移除默认的边距和填充，以确保整个页面高度被利用。
- video-container类使用position: fixed来确保视频背景固定在视口中，并覆盖整个页面。
- video元素使用object-fit: cover来确保视频覆盖整个容器而不失真。width和height设置为100%以确保视频填充整个容器。
- .content类用于放置页面的其他内容，并设置相对定位和较高的z-index以确保内容显示在视频背景之上。