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;
    ...
  }
...

Here is the forked jsfiddle