javascripthtmlcsssplash-screen
videos appearing in-front of splash-screen
Works fine when splash-screens are at the bottom of the html.
Why is that?
Seen here: https://jsfiddle.net/wkjb9x3f/
After clicking the exit button, no videos appear in-front of the splash-screen.
I was told to place the splash-screens in with the content.
I did that here:
Code I am working on: https://jsfiddle.net/b90xuodn/
Now after I click on the exit button, the videos are appearing in-front of the splash-screen.
How is this fixed?
How the code works:
An exit button appears on the screen after sliding curtain goes up.
Click on that to reveal the splash-screen.
/*global YT */
/*jslint browser:true */
/*jslint devel: true */
window.onload = function() {
const splashScreen = document.querySelector(".splash-screen");
splashScreen.classList.add("hide");
const panel = document.querySelector(".panel");
panel.classList.add("slide");
const wrap = document.querySelector(".wrap");
splashScreen.addEventListener("transitionend", function() {
splashScreen.style.pointerEvents = "none";
wrap.classList.remove("hide");
});
const closeButton = document.querySelector(".exitInitial");
panel.addEventListener("transitionend", function() {
closeButton.classList.add("visible");
});
};
addYoutubeScriptTagToHTML();
const closeModal = document.querySelector(".exitInitial");
closeModal.addEventListener("click", modalClickHandler);
const players = [];
function removeModal(modalSelector) {
const modal = document.querySelector(modalSelector);
modal.classList.remove("open");
}
function hideSplashScreen(splashScreenSelector) {
const splashScreen = document.querySelector(splashScreenSelector);
splashScreen.classList.add("hide");
splashScreen.addEventListener("transitionend", function() {
splashScreen.style.pointerEvents = "none";
});
}
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}
function resetPage() {
hideSplashScreen(".splash-screen2");
hideContainer(".containerB");
removeModal("#myModal");
}
function onYouTubeIframeAPIReady() {
const defaultVideo = {
class: ".playInitial",
options: {
playerVars: {
loop: 1
}
}
};
const parent = document.querySelector(defaultVideo.class).parentElement;
createPlayer(parent, defaultVideo.options);
}
function modalClickHandler() {
if (players[0]) {
players[0].destroy();
players.shift();
}
console.log("hit");
resetPage();
const videosToAddAfterModalClick = [{
class: ".playa",
options: {}
}, {
class: ".playb",
options: {
videoId: "CHahce95B1g"
}
}, {
class: ".playc",
options: {
videoId: "CHahce95B1g"
}
}, {
class: ".playd",
options: {
playerVars: {
start: "50",
videoId: "CHahce95B1g"
}
}
}, {
class: ".playe",
options: {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
}
}];
videosToAddAfterModalClick.forEach(function(video) {
const parent = document.querySelector(video.class).parentElement;
createPlayer(parent, video.options);
});
}
const exitButton = document.querySelector(".exit");
exitButton.addEventListener("click", exitClickHandler);
function hideContainer2(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}
function showSplashScreen(splashScreenSelector) {
const splashScreen = document.querySelector(splashScreenSelector);
splashScreen.style.pointerEvents = "auto";
splashScreen.classList.remove("hide");
//splashScreen.offsetWidth = splashScreen.offsetWidth;
window.getComputedStyle(splashScreen).getPropertyValue("width");
splashScreen.classList.add("hide");
splashScreen.addEventListener("transitionend", function() {
splashScreen.style.pointerEvents = "none";
});
}
function showContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.remove("hide");
}
function resetPage2() {
hideContainer2(".containerA");
showSplashScreen(".splash-screen3");
showContainer(".containerB");
}
function exitClickHandler() {
players.forEach(function(player) {
player.destroy();
});
resetPage2();
window.scrollTo(0, 0);
const videosToAddAfterExitButtonClick = [{
class: ".playf",
options: {}
}, {
class: ".playg",
options: {
videoId: "CHahce95B1g"
}
}, {
class: ".playh",
options: {
videoId: "CHahce95B1g"
}
}, {
class: ".playi",
options: {
playerVars: {
start: "50",
videoId: "CHahce95B1g"
}
}
}, {
class: ".playj",
options: {
playerVars: {
playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
}
}
}];
videosToAddAfterExitButtonClick.forEach(function(video) {
const parent = document.querySelector(video.class).parentElement;
createPlayer(parent, video.options);
});
}
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
if (player === players[0]) {
shufflePlaylist(player);
}
}
function shufflePlaylist(player) {
player.setShuffle(true);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerStateChange(event) {
const eventPlayer = event.target;
if (eventPlayer !== players[0]) {
if (event.data === 1) {
players.forEach(function pauseOtherVideos(player) {
const hasIframe = player.getIframe();
const isDifferentPlayer = player !== eventPlayer;
const isPlaying = player.getPlayerState() === 1;
if (hasIframe && isDifferentPlayer && isPlaying) {
player.pauseVideo();
console.log("pause");
}
});
}
}
}
function addPlayer(video, playerOptions) {
let id = video.dataset.id;
if (id.startsWith("PL")) {
playerOptions.playerVars = playerOptions.playerVars || {};
playerOptions.playerVars.listType = "playlist";
playerOptions.playerVars.list = id;
} else {
playerOptions.videoId = id;
}
playerOptions.videoId = playerOptions.videoId || video.dataset.id;
playerOptions.events = playerOptions.events || {};
playerOptions.events.onReady = onPlayerReady;
playerOptions.events.onStateChange = onPlayerStateChange;
players.push(new YT.Player(video, playerOptions));
}
function createPlayer(videoWrapper, playerOptions) {
const playerVars = {
autoplay: 0,
controls: 1,
disablekb: 1,
fs: 0,
iv_load_policy: 3
};
const defaults = {
height: 360,
host: "https://www.youtube-nocookie.com",
playerVars,
width: 640
};
function combinePlayerOptions(opts1, opts2) {
const combined = Object.assign({}, opts1, opts2);
Object.keys(opts1).forEach(function checkObjects(prop) {
if (typeof opts1[prop] === "object") {
combined[prop] = Object.assign({}, opts1[prop], opts2[prop]);
}
});
return combined;
}
const video = videoWrapper.querySelector(".video");
const options = combinePlayerOptions(defaults, playerOptions);
addPlayer(video, options);
}
function addYoutubeScriptTagToHTML() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
} /*:root {
--color-a: #1155cc;
--color-b: transparent;
--color-c: #1155cc;
--color-d: transparent;
}*/
svg {
--color-a: red;
--color-b: black;
--color-c: red;
--color-d: black;
}
.modal {
display: none;
}
body:has(.modal.open) {
overflow: hidden;
}
.modal.open {
display: flex;
justify-content: center;
align-content: center;
padding: 8px 8px;
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
/* Enable scroll if needed */
background-color: black;
}
.modal-content {
flex: 1 0 0;
margin: auto;
max-width: 640px;
border: 21px solid;
border-radius: 3.2px;
border-color: #000 #101010 #000 #101010;
position: relative;
padding: 1px;
}
.modal-content::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border: 1px solid #0059dd;
pointer-events: none;
}
:root {
--wide: 8.8%;
--angle1: 0;
--angle2: -90;
}
.panel {
position: absolute;
height: 100%;
width: 100%;
top: 0;
background:
repeating-linear-gradient(calc(var(--angle1) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px)), repeating-linear-gradient(calc(calc(var(--angle2) + 90) * 1deg), #ffffff00 0, #ffffff00 var(--wide), #ffffff1a calc(var(--wide) + 1px), #0000004d calc(var(--wide) + 2px), #ffffff00 calc(var(--wide) + 5px));
background-color: transparent;
border-bottom: 2px solid #191919;
background-repeat: no-repeat;
z-index: 0;
overflow: hidden;
transform: translateY(0%);
transition: 8s;
}
/*body:has(.splash-screen.hide[style]) .modal-content .panel {
transition-delay: 4s;
transform: translateY(calc(-100% - 1px));
}*/
.panel.slide {
transition-delay: 2s;
transform: translateY(calc(-100% - 1px));
}
/*
All that is needed
body:has(.splash-screen.hide[style]) .modal-content .panel {
transform: translateY(calc(-100% - 1px));
}
window.onload = function() {
const splashScreen = document.querySelector('.splash-screen');
splashScreen.classList.add('hide');
splashScreen.addEventListener('transitionend', function() {
splashScreen.style.display = 'none';
});
};*/
html,
body {
margin: 0;
padding: 0;
}
body {
background: #121212;
padding: 50px 8px;
}
.containerA {
background-color: Red;
}
.container,
.container5 {
max-width: 642px;
margin: 15px auto 30px;
padding: 15px;
/*box-shadow: 0 0 0 rgb(0 0 0 / 20%);*/
border: 1px solid #0059dd;
border-radius: 0;
background: linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
}
.containerB {
background-color: blue;
}
.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
}
/*.ratio-keeper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}*/
.video-frame {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.exitInitial {
transform: translatey(100%);
pointer-events: none;
position: absolute;
inset: 0 0 0 0;
z-index: 1;
/*margin: auto auto 0;*/
pointer-events: initial;
top: auto;
bottom: -1px;
margin: auto;
right: 0;
left: 0;
/*margin: 10px auto 0;*/
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
opacity: 0;
transition: opacity 3s ease-in;
transition-delay: 1s;
pointer-events: none;
}
.exitInitial.visible {
opacity: 1;
pointer-events: auto;
}
.exitInitial::before,
.exitInitial::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exitInitial::after {
transform: rotate(-45deg);
}
.splash-screen {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 2;
inset: 0 0 0 0;
background: transparent;
opacity: 1;
cursor: default;
}
.splash-screen.hide {
opacity: 0;
transition-delay: 400ms;
cursor: default;
}
.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 */
/*dissable mouse clicking */
cursor: default;
}
.splash-screen2.hide {
opacity: 0;
transition-delay: 3s;
/* Add a delay of 1 seconds before the opacity changes to 0 */
/* Re-enable mouse clicking after 1 seconds */
cursor: default;
}
.splash-screen3 {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
z-index: 0;
inset: 0 0 0 0;
Background-color: green;
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;
cursor: default;
}
.splash-screen3.hide {
z-index: 1;
opacity: 0;
transition-delay: 3s;
/* Add a delay of 1 seconds before the opacity changes to 0 */
pointer-events: none;
/* Re-enable mouse clicking after 1 seconds */
cursor: default;
}
.inner {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 200%;
z-index: 2;
}
.container2 {
max-width: 360px;
border: 1px solid #ccc;
}
.container2 div {
display: flex;
justify-content: center;
}
.container2 img {
display: block;
margin: auto;
width: 33.33%;
height: auto;
}
.blog-pager {
max-width: 674px;
height: 52px;
box-sizing: border-box;
border: 1px solid #0059dd;
margin: 30px auto;
background: linear-gradient(45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px),
linear-gradient(-45deg,
transparent,
transparent 7px,
rgb(113, 121, 126) 7px,
rgb(113, 121, 126) 7.5px,
transparent 7.5px,
transparent 10px);
background-size: 10px 10px;
display: flex;
align-items: center;
justify-content: center;
}
.exit {
position: relative;
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
/*margin: auto;*/
}
.exit::before,
.exit::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exit::after {
transform: rotate(-45deg);
}
.footer {
box-sizing: border-box;
border-top: 1px solid green;
background: #121212;
height: 59px;
}
.footer {
margin: 0 -8px
}
.wrap.hide {
display: none;
}
.containerB.hide {
display: none;
}
.containerA.hide {
display: none;
}<div class="splash-screen">
<div class="circle">
<svg class="box" width="170" height="170" viewBox="0 0 170 170">
<rect x="0" y="0" width="170" height="170" fill="var(--color-a)" />
<rect x="5" y="5" width="160" height="160" fill="var(--color-b)" />
<rect x="10" y="10" width="150" height="150" fill="var(--color-c)" />
<rect x="15" y="15" width="140" height="140" fill="var(--color-d)" />
<rect x="20" y="20" width="130" height="130" fill="var(--color-a)" />
<rect x="25" y="25" width="120" height="120" fill="var(--color-b)" />
<rect x="30" y="30" width="110" height="110" fill="var(--color-c)" />
<rect x="35" y="35" width="100" height="100" fill="var(--color-d)" />
<rect x="40" y="40" width="90" height="90" fill="var(--color-a)" />
<rect x="45" y="45" width="80" height="80" fill="var(--color-b)" />
<rect x="50" y="50" width="70" height="70" fill="var(--color-c)" />
<rect x="55" y="55" width="60" height="60" fill="var(--color-d)" />
<rect x="60" y="60" width="50" height="50" fill="var(--color-a)" />
<rect x="65" y="65" width="40" height="40" fill="var(--color-b)" />
<rect x="70" y="70" width="30" height="30" fill="var(--color-c)" />
<rect x="75" y="75" width="20" height="20" fill="var(--color-d)" />
<rect x="80" y="80" width="10" height="10" fill="var(--color-a)" />
</svg>
</div>
</div>
<div id="myModal" class="modal open">
<div class="modal-content">
<button class="exitInitial" type="button" title="Exit" aria-label="Close"></button>
<div class="ratio-keeper">
<div class="wrap hide">
<div class="video video-frame" data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
</div>
<div class="panel"></div>
</div>
<div class="playInitial remove"></div>
</div>
</div>
<!-- end modal -->
<div class="outer-container">
<div class="splash-screen2">
<div class="inner">
<div class="container2">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</div>
</div>
</div>
<div class="containerA ">
<div class="container">
<div class="ratio-keeper ">
<div class="video video-frame " data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
</div>
<div class="playa"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playb"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playc"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playd"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playe" data-id="AxLxnN6z0Og"></div>
</div>
<div class="blog-pager ">
<button class="exit" type="button" title="Exit" aria-label="Close"></button>
</div>
</div>
<div class="splash-screen3 hide">
<div class="inner">
<div class="container2">
<img src="https://i.imgur.com/z5MMJnv.png" alt="Image 1">
<div>
<img src="https://i.imgur.com/5u16syR.png" alt="Image 2">
<img src="https://i.imgur.com/ygTtvme.png" alt="Image 3">
<img src="https://i.imgur.com/QziKNDW.png" alt="Image 4">
</div>
<img src="https://i.imgur.com/8Jf8LLc.png" alt="Image 5">
</div>
</div>
</div>
<div class="containerB hide">
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
</div>
<div class="playf"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playg"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playh"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playi"></div>
</div>
<div class="container">
<div class="ratio-keeper">
<div class="video video-frame" data-id="AxLxnN6z0Og"></div>
</div>
<div class="playj" data-id="AxLxnN6z0Og"></div>
</div>
<div class="blog-pager">
<a title="Exit" aria-label="Close"></a>
</div>
</div>
<div class="footer"></div>
</div>Solution
You just need to adjust the z-indexes, first the .modal.open (increase it from 0 to 3):
...
.modal.open {
...
z-index: 3;
...
}
...
Then for both .splash-screen2 and .splash-screen3, increase them from 1 to 2:
...
.splash-screen2 {
...
z-index: 2;
...
}
...
.splash-screen3 {
...
z-index: 2;
...
}
...
- Firebase auth: Update (not signed in user) password without use 'sendPasswordResetEmail'
- How do I add a default text to the beginning of an html text area?
- ES2015 import doesn't work (even at top-level) in Firefox
- Can a bi-directional WeakMap lead to a memory leak?
- Set the default value of an input field
- How to force background image to stretch/compress to fit div, without keeping aspect ratio
- My Javascript file won't run because of bigint error
- Using innerHTML with querySelectorAll
- What is Firebase Firestore 'Reference' data type good for?
- SVG: Convert Arcs to Cubic Bezier
- How to open modal located in child component from parent when button clicked?
- Navigation arrows are not showing
- Get week of year in JavaScript like in PHP
- How to show the date picker if I click the parent div after explictly hiding the date type input in React?
- How to disable smart quotes for textarea fields in the browser?
- Access key from child component in vue
- How can I allow document.domain on a sandboxed iframe?
- React Router useNavigate with a useEffect hook - proper way to use?
- Unable to resolve JavaScript File when Building with Astro
- CORS Error: Response to preflight request doesn't pass access control check (Shopify App)
- Append element as sibling after element?
- How to solve FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore problem?
- How to create a custom button in react-pdf-viewer?
- In Qualtrics, what can I do to make my with javasectipt embedded HTML text exactly the same as the default text?
- Peak and Flag Codility latest chellange
- React.js: Set innerHTML vs dangerouslySetInnerHTML
- How to merge row cells in TanStack React Table v7 to v8
- How to work with leaflet polyline's context menu
- GEDCOM parser in JavaScript
- jQuery 1.3.2 -using .click()