or, how do you prevent videos from being clicked from behind an image?
If there is an image in-front of videos, how do you prevent them from being clicked, the videos from behind the image?
What will work here?
First click the close button when it appears on the screen after the curtain goes up.
code https://jsfiddle.net/5abh8Lm1/1/
Next I am taken to this screen, where I am able to click on the videos behind the image.
How do I prevent that from occurring?
How do you prevent a video from being clicked before the image disappears?
.splash-screen2 {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 0;
inset: 0 0 0 0;
Background-color: black;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="165" height="165" viewBox="0 0 165 165"><rect x="80" y="80" width="10" height="10" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(17, 85, 204);" /><rect x="72.5" y="72.5" width="25" height="25" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="62.5" y="62.5" width="45" height="45" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="52.5" y="52.5" width="65" height="65" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="42.5" y="42.5" width="85" height="85" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="32.5" y="32.5" width="105" height="105" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="22.5" y="22.5" width="125" height="125" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="12.5" y="12.5" width="145" height="145" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /><rect x="2.5" y="2.5" width="165" height="165" style="fill: none; stroke-width: 5px; stroke: rgb(17, 85, 204);" /></svg>');
opacity: 1;
/* Set transition duration to 1 seconds */
pointer-events: none;
/*dissable mouse clicking */
cursor: default;
}
.splash-screen2.hide {
opacity: 0;
transition-delay: 10s;
/* Add a delay of 1 seconds before the opacity changes to 0 */
pointer-events: none;
/* Re-enable mouse clicking after 1 seconds */
cursor: default;
}
First thing you need to do is remove pointer-events: none;
from both .splash-screen2
and .splash-screen2.hide
selectors:
...
.splash-screen2 {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 0;
inset: 0 0 0 0;
...
opacity: 1;
pointer-events: none; /* remove this */
cursor: default;
}
.splash-screen2.hide {
opacity: 0;
transition-delay: 10s;
pointer-events: none; /* remove this */
cursor: default;
}
...
After that, since the videos should appear after the transition end, you can listen to transitionend
event on the .splash-screen2
to know if the transition has ended:
...
splashScreen2.addEventListener('transitionend', function(){
splashScreen2.style.pointerEvents = 'none';
});
...
This way, the pointer will not be blocked on the hidden splash screen until it fully transitioned into hidden.