To create a video background in a web page, you can do it using CSS and HTML. Here's a simple way:
1. First, prepare your video file: Prepare your video file (usually in .mp4 format) and make sure it has been uploaded to your website or server.
2. Create HTML structure: Add a tag in the HTML file <video>to embed the video.
<!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>
<video class="video-background" autoplay muted loop>
<source src="path/to/your/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="content">
<!-- 在这里添加你的其他内容 -->
</div>
</body>
</html>In the above HTML code, we added a <video>tag and set its class to "video-background". Then, we <video>added a <source>tag within the tags to specify the path to the video file.
3. Use CSS to set the video background style: In the CSS file, you can set <video>the style of the label so that it covers the entire screen and displays as the background.
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
.video-background {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
.content {
/* 添加其他内容区域的样式，比如文字、按钮等 */
/* 可以使用position:absolute;来定位内容区域 */
}
In the above CSS code, we <video>set the label to fixed positioning and set its sum widthto heightso 100%that the video will fill the entire screen. At the same time, we set <video>the label's value z-indexto -1 so that it will be positioned below the other content as a background.
You can adjust the style according to your own needs, such as adding other content areas (such as text, buttons, etc.), and use position:absolute;to position the content area.
This way, when you open the HTML file, you'll see the video automatically playing in the background while other content appears on top of it.