How to add another splash screen?

At the code here: https://jsfiddle.net/hdogfukr/1/

How do I add a splash screen after clicking the 2nd exit button?

Currently, I have a splash screen added after the 1st exit button is clicked.

I want to add another splash screen after the 2nd exit button is clicked.

How do I do that?

  .splash-screen3 {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: -1;
    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;
    /* Set transition duration to 1 seconds */
    /*dissable mouse clicking */
    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 */
  
    /* Re-enable mouse clicking after 1 seconds */
    cursor: default;
  }

html

<div class="splash-screen3">
  <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>

1st exit button is clicked:


Then you see this:


That disappears and then you see the videos:


Scroll down and click 2nd exit button:


Then you will see 2nd splash screen:


That will disappear on its own, then the videos are shown:

I believe I already gave you the answer to this.

If you look at this fiddle and add these changes.

  .splash-screen3 {
    z-index: -1;
    transition: none
  }

  .splash-screen3.hide {
    z-index: 1;
    transition: opacity 0s linear 3s;
  }

That looks the same to me as I have simply removed the transition fade which you don’t have on the first one.

By continually adding features you have lost any real flow in that page and made it hard to work in sequence as your splash covers are separate from the elements they hid and therefore stacking contexts cannot be consistent. the problem with the last splash is that it has to be stacked under the splash before but then moved on top of the video when it shows. If you move it above the video by default then it is also above the second splash. The videos and the splashes should be in a more logical structure so that you aren’t jumping around the html all the time trying to stack disparate objects.

2 Likes

transition-delay: 3s; is not in the code you provided.

transition-delay: 3s; is set in .splash-screen2

I am looking for something like this: https://jsfiddle.net/z3mbwcg5/

Visually, everything is good here.

Is there a better way?

const splashScreen3 = document.querySelector('.splash-screen3'); // Add This

Then this:

  splashScreen3.style.pointerEvents = 'auto';
  splashScreen3.classList.remove('hide');
  splashScreen3.offsetWidth = splashScreen3.offsetWidth;
  splashScreen3.classList.add('hide');

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth

The first line is to reenable the pointer-events CSS, then we remove the hide class to show the splashScreen3 again, then we set the offsetWidth as a dummy so that a reflow is triggered, then finally we add hide class again to the splashScreen3 to hide it again.

Is doing this making it more complicated than it needs or aught to be?

technically you dont need to set offsetWidth, you can nullop reference it:
splashScreen3.offsetWidth;

and it will reflow.

1 Like

Yes it is its right there above your post.

  .splash-screen3.hide {
    z-index: 1;
    transition: opacity 0s linear 3s;
  }

The last 3s is the delay.

Apart from the black screen at the start that is exactly what my code does when added to that fiddle I keep mentioning.

The splash2 and 3 screens are exactly the same. You don’t want the transition rule added until the hide class is added and as you don’t want it to fade out or in the transition duration is 0s. Had you constructed this logically and correctly this would be a lot simpler as already mentioned.

I don’t believe this will work with your code:

splashScreen3.addEventListener('transitionend', function(){
    splashScreen3.style.pointerEvents = 'none';
});

Why not?

If you just give it a short transition then it should work.


  .splash-screen3.hide {
    z-index: 1;
    transition: opacity 0,1s linear 3s;
  }

The js here is a bit more cleaned up: https://jsfiddle.net/tjhzbLw4/

Now I will try adding your code into it, removing only the js that is not needed for it to work.

In your code it is viewable before the exit button is clicked:

In the code that uses: offsetWidth

The splash screen can’t be seen until after the exit button is pressed.


Is there a way for your code to work like that?

In your example the first splash screen is hidden behind the black background of the modal. That’s why you can’t see it. If you were to do the same with splashscreen3 then you wouldn’t need to hide it and then show it and then hide it again.

However as you now have a working version I don’t see a point in changing just to switch one set of code for another.

It seems you move the goalposts each time and as far as I understood you were actually tying to make the backgrounds transparent so that you could see the things underneath but that seems to be changed now.

You also don’t seem to be waiting for the videos to be loaded before removing the background as you have set an arbitrary 3 second fade but as mentioned many times my connection takes much much longer than that to load a video. (I believe I actually gave you code for this some time ago).

As I said above I don’t see a need to fiddle anymore with this if it is working as you expected. If you are just doing this for amusement then I would suggest you start again with a more logical format. I don’t know why you need the multiple modals/splashes as you could probably just have one and change the backgrounds each time. Or include each splash screen with the container it refers to and keep a consistent logical structure that can be replicated as required.

1 Like

If you were to do the same with splashscreen3 then you wouldn’t need to hide it and then show it and then hide it again.

I wouldn’t, I don’t understand, how else would it be written?

That is what I had been wanting to do, replicate splash screen 2 with 3.

How would I have it sitting behind a background before it gets seen?

I couldn’t figure out how to do that.

You can’t really be cause you are using the modal divs background to hide the next item. You have it working now so there’s no point in restructuring.

If you wanted to completely start again then a more logical approach for revealing sections would be like this:

Of course if you move the goal posts again and want a transparent background to to bleed through to the body background each time then you’d have to hide everything once again.

As I keep saying you design for the task in hand and not for some other task that you think of later.

The first problem I run into:

Adding splash into the flow of the html.

splash doesn’t stay in-front of the videos after clicking 1st exit button.
https://jsfiddle.net/e1bpwzo9/

I don’t think changing z-index does anything to fix this.

It was working here: https://jsfiddle.net/3tmywnb5/

When the splash was at the bottom of the html.

Not sure why one way acts different from the other.

I can do this, but did not need to hide .containerA when splash was at the bottom.

https://jsfiddle.net/kwb5vu24/3/

function hideSplashScreen(splashScreenSelector, containerSelector) {
  const splashScreen = document.querySelector(splashScreenSelector);
  const container = document.querySelector(containerSelector);
  splashScreen.classList.add("hide");
  splashScreen.addEventListener("transitionend", function() {
    splashScreen.style.pointerEvents = "none";
    container.classList.remove("hide"); // Unhide containerA after the transition ends
  });
}

function resetPage() {
  hideSplashScreen(".splash-screen2", ".containerA");
  hideContainer(".containerB");
  removeModal("#myModal");
}

That makes no difference as you are just swapping one set of bodges for another. That’s not creating a logical flow as in my example so there’s no point in just moving it up the html Just go back to what you had.

You missed the point that in my example each section is self contained with the splash. The container contains the splash and hence the stacking order is normalised. You’d have to start from scratch to try my approach as there’s too much spaghetti in the code at the moment to make an easy change. In my version you’d likely just need the same js routine for all the sections because effectively you do the same thing in each block. Hide the splash and show the video. That could be done by context without needing exact references.

However its a bridge too far at this stage and I don’t have the time at the moment for a complete rewrite.:slight_smile:

How would this be written where it would be similar to your codepen example?

Like this? https://jsfiddle.net/4qg16soa/

I wanted to get the html down correct.

<div class="videos v1">
  <div class="splash">
    Splash 1
    <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>
  <div class="content">
    <h2>Video section 1</h2>
    <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>
<!-- end videos -->

<div class="videos v2">
  <div class="splash">
    Splash 2
    <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>
  <div class="content">
    <h2>Video section 2</h2>
    <div class="containerB ">
      <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>
</div>
<!-- end videos -->

That’s roughly it but I was thinking more like this:

<div class="videos v1">
  <div class="splash splash-screen">splash/modal stuff in here </div>
  <div class="content">
    <div class="container">
      <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>
</div><!-- end videos -->

etc  more of the same,,,

The html could more or less be repeated as it is but you just change the backgrounds and videos etc.

The only different thing that needs to happen is that on the first one the splash/modal screen is there by default and removed when the page is loaded and the rising curtain…

The rest of the panels are all activated when you click each X button so that js could be the same for all if you find the parent by its context.

The different classes on the parent (v1,v2,v3 etc) would allow for different background or whatever is needed inside each section.

However it would be quite a task to rewrite all that JS as it is all tied to specific things. I would be inclined to start from scratch again and solve one problem at a time before moving on to the next.

Something I realized.

If I’m not going to use opacity, I should just use visibility visible/hidden.

Because when that is used, then I don’t even need to use pointer events none/auto.

When visibility hidden is used, that disables pointer events by itself.

Is there any downside to doing that?

  .splash-screen {
    /*opacity: 1;*/
    visibility:visible;
    cursor: default;
  }

  .splash-screen.hide {
    /*opacity: 0;*/
     visibility:hidden;
    transition-delay: 400ms;
    cursor: default;
  }

.splash-screen2 {
    /*opacity: 1;*/
    visibility:visible;
    cursor: default;
  }

  .splash-screen2.hide {
    /*opacity: 0;*/
    visibility:hidden;
    transition-delay: 5s;
    cursor: default;
  }

.wrap {
 visibility: visible;
  }

  .wrap.hide {
   visibility: hidden;
  }

      .wrap2 {
   /* opacity:1;*/
     visibility:visible;
  }
    .wrap2.hide {
    visibility:hidden;
  }
      .wrap3 {
   /* opacity:1;*/
     visibility:visible;
  }
    .wrap3.hide {
    visibility:hidden;
  }

Here is what I have so far: https://jsfiddle.net/8436sueb/3/

Adding hide to all the videos here made no sense at all.

This:

        <div class="wrap2 hide">
          <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
        </div>

There is a better way, will be in my updated code.

Instead of pointerEvents = “none”; being used in the code,

I am using visibility:visible/hidden in place of that.

Using that disables being able to click on things.

Because, If I am not going to be using a fade effect, then why use opacity at all, right?

<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="wrap2 hide">
          <div class="video video-frame " data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
        </div>
      </div>
      <div class="playa"></div>
    </div>
    <div class="container">
      <div class="ratio-keeper">
        <div class="wrap2 hide">
          <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playb"></div>
    </div>
    <div class="container">
      <div class="ratio-keeper">
        <div class="wrap2 hide">
          <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playc"></div>
    </div>
    <div class="container">
      <div class="ratio-keeper">
        <div class="wrap2 hide">
          <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playd"></div>
    </div>
    <div class="container">
      <div class="ratio-keeper ">
        <div class="wrap2 hide">
          <div class="video video-frame " data-id="PL6KcpeEiGPpxSF3yIJSsNSOZGb4hBXhrN"></div>
        </div>
      </div>
      <div class="playe"></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 ">
    <div class="container">
      <div class="ratio-keeper">
        <div class="wrap3 hide">
          <div class="video video-frame" data-id="PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq"></div>
        </div>
      </div>
      <div class="playf"></div>
    </div>
    <div class="container">
      <div class="ratio-keeper">
        <div class="wrap3 hide">
          <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playg"></div>
    </div>
    <div class="container">
      <div class="ratio-keeper">
        <div class="wrap3 hide">
          <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playh"></div>
    </div>
    <div class="container">
      <div class="ratio-keeper">
        <div class="wrap3 hide">
          <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playi"></div>
    </div>
    <div class="container">
      <div class="ratio-keeper">
        <div class="wrap3 hide">
          <div class="video video-frame" data-id="AxLxnN6z0Og"></div>
        </div>
      </div>
      <div class="playj"></div>
    </div>
    <div class="blog-pager">
      <a title="Exit" aria-label="Close"></a>

    </div>
  </div>

  <div class="footer"></div>
</div>

Updated code, no hides attached to the videos.

This is better?

https://jsfiddle.net/kd9wL3xo/2/

.splash-screen {
    z-index: 4;
}

.modal.open {
    z-index: 3;
}
 .splash-screen2 {
    z-index: 2;
}

.splash-screen3 {
  z-index: 2;
}
<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>