I'm currently working on a JavaScript splash screen that features a video background. When the user clicks on the screen, it should smoothly transition to the home page. However, for mobile devices, I want to display an image instead of the video. My initial attempt at this worked in showing the image, but it did not fade out after being clicked. Here is the code snippet before my attempt:
<style>
#splashscreen {
background-color: #000000;
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 20000;
}
.logo {
position: fixed;
top: 50%;
left: 50%;
z-index:100000;
height: auto;
max-width: 55%;
/* vendor prefixes here */
transform: translate(-50%, -50%);
}
@media only screen and (max-width: 600px) {
.logo {
max-width:90%;
}
video {
object-fit: cover;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
opacity: 0.9;
z-index: 10000;
}
</style>
<div id="splashscreen">
<a href="#" class="enter_link">
<img class="logo" src="XXXXXXXXXX">
<video playsinline="" autoplay="" muted="" loop="" poster="XXXXXXXXXXX" id="bgvid">
<source src="XXXXXXXXXXX" type="video/mp4">
</source></video></a>
</div>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.enter_link').click(function () {
$(this).parent('#splashscreen').fadeOut(500);
});
});
//]]>
</script>
Your assistance is greatly appreciated.