Currently, I am facing two challenges while trying to set up an mp4 video in the pre-loader of my webpage. Firstly, the video is not responsive on my HTML page. Unlike its default behavior where it adjusts size according to screen variation, it fails to do so once loaded on the webpage. Secondly, the video does not trigger any header element to display after playing.
Expectations: I want the video to play first when the page loads and then show other content on the page. Additionally, I expect the video to behave as it would in its original form.
Below is the code snippet:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Your Page Title</title>
</head>
<body>
<!-- Preloader Container -->
<div id="preloader-container">
<video autoplay muted loop id="preloader-video">
<source src="preloader.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<header>Hello World</header>
<script src="script.js"></script>
</body>
</html>
//styles.css
/* styles.css */
body {
margin: 0;
overflow: hidden; /* Prevent scrolling during preloading */
}
#preloader-container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #fff; /* Background color for the preloader */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999; /* Ensure the preloader is on top of other elements */
}
#preloader-container video {
width: 100%; /* Make the video width cover the container */
height: 100%; /* Make the video height cover the container */
object-fit: cover; /* Maintain the video aspect ratio while covering the entire container */
}
// script.js
// script.js
document.addEventListener("DOMContentLoaded", function() {
var preloaderVideo = document.getElementById("preloader-video");
if (preloaderVideo) {
// Reset video playback to the beginning when the page is loaded or refreshed
preloaderVideo.currentTime = 0;
// Hide the preloader container after the video has played
preloaderVideo.addEventListener("ended", function() {
document.getElementById("preloader-container").style.display = "none";
});
}
});