xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background: #000;
}
.video-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.video-background video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="video-background">
<video autoplay loop muted>
<source src="path/to/video.mp4" type="video/mp4">
</video>
</div>
<h1>Website Content</h1>
<!-- Rest of the web page content here -->
</body>
</html>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.video-background {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -1;
}
.video-background video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="video-background">
<video autoplay loop muted>
<source src="path/to/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<!-- Rest of your HTML content -->
</body>
</html>
xxxxxxxxxx
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
xxxxxxxxxx
.bg-vid {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
xxxxxxxxxx
<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
<source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>
xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<title>Background Video Example</title>
<style>
.background-video {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.background-video video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="background-video">
<video autoplay muted loop>
<source src="path/to/video.mp4" type="video/mp4">
<!-- Add additional source tags for different video formats if needed -->
</video>
</div>
</body>
</html>
xxxxxxxxxx
.container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.video-background video {
width: 100%;
height: 100%;
object-fit: cover;
}
xxxxxxxxxx
@media (max-width: 750px) {
#background-video { display: none; }
body {
background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
background-size: cover;
}
}
xxxxxxxxxx
h1, h2 {
color: white;
font-family: Trebuchet MS;
font-weight: bold;
text-align: center;
}
h1 {
font-size: 6rem;
margin-top: 30vh;
}
h2 { font-size: 3rem; }