xxxxxxxxxx
<!DOCTYPE html>
<html>
<head>
<style>
#video-background {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
#video-content {
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<video id="video-background" autoplay loop muted>
<source src="path_to_video/video.mp4" type="video/mp4">
<!-- Additional source files for different video formats can be added here -->
</video>
<div id="video-content">
<!-- The rest of your webpage content goes here -->
<h1>Welcome to my website!</h1>
<p>This is an example of a webpage with a video in the background.</p>
</div>
</body>
</html>
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>
<h1>THIS IS A RIVER.</h1>
<h2>How majestic.</h2>
<style>
/* video background */
#background-video {
height: 100vh;
width: 100vw;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
/* page content */
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; }
@media (max-width: 750px) {
#background-video { display: none; }
body {
background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
background-size: cover;
}
}
</style>
xxxxxxxxxx
<video autoplay loop muted id="backgroundVideo">
<source src="background.mp4" type="video/mp4">
</video>
<style>
#backgroundVideo {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
overflow: hidden;
}
</style>
xxxxxxxxxx
How to create a full screen video background.
source: w3schools.com
<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="backgroundVideo.mp4" type="video/mp4">
</video>
<!-- Optional: some overlay text to describe the video -->
<div class="content">
<h1>Heading</h1>
<p>Lorem ipsum</p>
<!-- Use a button to pause/play the video with JavaScript -->
<button id="myBtn" onclick="myFunction()">Pause</button>
</div>
xxxxxxxxxx
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
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
@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; }
xxxxxxxxxx
To add a video as background in HTML, you would need to insert a video, Fix its position and
make its size as big as your website. Mind this may lead to issues in site responsiveness.
Enjoy :D