Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I add video to site background in HTML 5?
HTML5's <video> element allows you to create stunning background videos that automatically play and loop behind your content. This technique is commonly used for modern, engaging websites.
HTML Structure
The basic HTML structure requires a video element with specific attributes for background functionality:
<!DOCTYPE html>
<html>
<head>
<style>
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background-size: cover;
}
.content {
position: relative;
z-index: 1;
background: rgba(0,0,0,0.5);
color: white;
padding: 20px;
text-align: center;
margin-top: 50px;
}
#playBtn {
background: #04AA6D;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin-top: 20px;
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo">
<source src="demo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<div class="content">
<h1>Welcome to Our Website</h1>
<p>This content appears over the background video</p>
<button id="playBtn" onclick="toggleVideo()">Pause Video</button>
</div>
<script>
let video = document.getElementById("myVideo");
let btn = document.getElementById("playBtn");
function toggleVideo() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause Video";
} else {
video.pause();
btn.innerHTML = "Play Video";
}
}
</script>
</body>
</html>
Key Video Attributes
| Attribute | Purpose | Required? |
|---|---|---|
autoplay |
Starts video automatically | Yes |
muted |
Prevents audio (required for autoplay) | Yes |
loop |
Repeats video infinitely | Yes |
CSS Positioning
The CSS ensures the video covers the entire viewport while allowing content to appear on top:
#myVideo {
position: fixed; /* Stays in place during scroll */
right: 0;
bottom: 0;
min-width: 100%; /* Covers full width */
min-height: 100%; /* Covers full height */
z-index: -1; /* Places behind content */
}
Play/Pause Control
Add interactive controls to let users pause or resume the background video:
let video = document.getElementById("myVideo");
let btn = document.getElementById("playBtn");
function toggleVideo() {
if (video.paused) {
video.play();
btn.innerHTML = "Pause Video";
console.log("Video resumed");
} else {
video.pause();
btn.innerHTML = "Play Video";
console.log("Video paused");
}
}
Video paused Video resumed
Browser Compatibility
Provide multiple video formats to ensure compatibility across different browsers:
<video autoplay muted loop>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Performance Considerations
For better performance, consider these optimizations:
- Use compressed video files (aim for under 5MB)
- Provide a poster image for slow connections
- Consider using CSS media queries to disable on mobile devices
Conclusion
HTML5 background videos create engaging user experiences when implemented with proper CSS positioning and the essential autoplay, muted, and loop attributes. Always provide fallback options and optimize file sizes for better performance.
480 Views
