Initially, the exit button appears as expected. I then proceed to click it. Following this action, the exit button should gradually become visible once the curtain has fully risen. However, this desired effect is not being achieved.
I provided a code snippet below.
That is all.
https://jsfiddle.net/fup36ga8/1/
/*global YT */
/*jslint browser:true */
/*jslint devel: true */
window.onload = function() {
const container = document.querySelector(".video-containerA");
const spinner = document.querySelector(".spinner");
const exitButton = document.querySelector(".exitA");
spinner.addEventListener("animationend", function() {
container.classList.add("slide");
});
container.addEventListener("transitionend", function() {
exitButton.classList.add("visible");
});
};
const videoPlayer = (function makeVideoPlayer() {
const players = [];
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function shufflePlaylist(player, shuffle) {
player.setShuffle(shuffle);
player.playVideoAt(0);
player.stopVideo();
}
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100);
const isShuffle = player.getIframe().dataset.shuffle === "true";
shufflePlaylist(player, isShuffle);
}
function addPlayer(video, playerOptions) {
playerOptions.playerVars = playerOptions.playerVars || {};
video.dataset.shuffle = playerOptions.shuffle;
playerOptions.events = playerOptions.events || {};
playerOptions.events.onReady = onPlayerReady;
players.push(new YT.Player(video, playerOptions));
}
function destroyPlayers() {
players.forEach(function(player) { // Use player array here
const playerElement = player.getIframe();
if (playerElement) {
const playerClass = playerElement.className;
console.log("Destroying player with class: " + playerClass);
player.destroy();
}
});
console.log("playerRemoved");
}
return {
addPlayer,
destroyPlayers
};
}());
const managePlayer = (function makeManagePlayer() {
const playerVars = {
autoplay: 0,
controls: 0,
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;
}
function createPlayer(videoWrapper, playerOptions = {}) {
const video = videoWrapper.querySelector(".video");
const options = combinePlayerOptions(defaults, playerOptions);
return videoPlayer.addPlayer(video, options);
}
function playerAdder(wrapper, playerOptions) {
return function addPlayerCallback() {
initPlayer(wrapper, playerOptions);
};
}
function initPlayer(wrapper, playerOptions) {
createPlayer(wrapper, playerOptions);
}
return {
adder: playerAdder
};
}());
const players = (function uiLoadPlayer() {
function addPlayer(playerSelector, playerOptions) {
const parent = document.querySelector(playerSelector).parentElement;
const callback = managePlayer.adder(parent, playerOptions);
callback();
}
return {
add: addPlayer
};
}());
function onYouTubeIframeAPIReady() {
// Initialize the first player
players.add(".playA", {
playerVars: {
list: "PL2pth5aaj4xrQ3dTg3tbTKnO4LtCOuf3l",
listType: "playlist"
},
shuffle: true
});
}
(function manageExitA() {
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}
function showContainer(containerSelector, spinnerSelector, exitSelector) {
const container = document.querySelector(containerSelector);
const exitButton = document.querySelector(exitSelector);
container.classList.remove("hide");
const spinner = document.querySelector(spinnerSelector);
spinner.addEventListener("animationend", function() {
container.classList.add("slide");
});
container.addEventListener("animationend", function() {
exitButton.classList.add("visible");
});
}
function removePlayer() {
videoPlayer.destroyPlayers();
}
function resetPage() {
hideContainer(".video-containerA");
showContainer(".video-containerB", ".video-containerB .spinner", ".exitB");
removePlayer();
}
function exitClickHandler() {
resetPage();
players.add(".playB", {
playerVars: {
list: "PL2pth5aaj4xrQ3dTg3tbTKnO4LtCOuf3l",
listType: "playlist",
loop: 0
}
});
}
const exit = document.querySelector(".exitA");
exit.addEventListener("click", exitClickHandler);
}());
(function manageExitB() {
function hideContainer(containerSelector) {
const container = document.querySelector(containerSelector);
container.classList.add("hide");
}
function showContainer(containerSelector, exitSelector) {
const container = document.querySelector(containerSelector);
const exitButton = document.querySelector(exitSelector);
container.classList.remove("hide");
container.classList.add("slide");
container.addEventListener("animationend", function() {
exitButton.classList.add("visible");
});
}
function removePlayer() {
videoPlayer.destroyPlayers();
}
function resetPage() {
hideContainer(".video-containerB");
showContainer(".video-containerC", ".exitC");
removePlayer();
}
function exitClickHandler() {
resetPage();
players.add(".playC", {
playerVars: {
list: "PL2pth5aaj4xrQ3dTg3tbTKnO4LtCOuf3l",
listType: "playlist"
},
shuffle: true
});
}
const exit = document.querySelector(".exitB");
exit.addEventListener("click", exitClickHandler);
}());
html,
body {
margin: 0;
padding: 0;
}
body {
background: #121212;
padding: 0 8px 0;
}
body:has(.modal.active) {
overflow: hidden;
}
button,
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.outer-containerA {
background: #15202b;
}
.outer-containerA,
.outer-containerB,
.modal {
display: flex;
position: fixed;
inset: 0;
overflow: auto;
/* Enable scroll if needed */
}
.video-containerA,
.video-containerB,
.video-containerC {
flex: 1 0 0;
margin: auto;
max-width: 640px;
position: relative;
}
.ratio-keeper {
height: 0;
padding-top: 56.25%;
overflow: hidden;
position: relative;
background: #000;
}
.ratio-keeper iframe {
/*position: absolute;
top: 0;
left: 0;*/
width: 100%;
height: 100%;
}
.ratio-keeper iframe,
.curtain {
position: absolute;
inset: 0;
}
.curtain {
/*position: absolute;
height: 100%;
width: 100%;
inset:0;*/
--wide: 8.8%;
--angle1: 0;
--angle2: -90;
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: #222;
border-bottom: 2px solid #191919;
background-repeat: no-repeat;
overflow: hidden;
}
.spinner {
-webkit-appearance: none;
appearance: none;
position: absolute;
inset: 0;
margin: auto;
width: 90px;
height: 90px;
border-radius: 50%;
cursor: pointer;
border: 9px solid;
background: transparent;
filter: drop-shadow(3px 3px 3px #000000b3);
pointer-events: none;
}
.spinner {
animation: rotate 2s linear forwards, fadeOut 1s 2s forwards;
border-color: red transparent red transparent;
}
@keyframes rotate {
50% {
transform: rotate(360deg);
border-color: red transparent red transparent;
}
100% {
transform: rotate(720deg);
border-color: red transparent red transparent;
}
}
@keyframes fadeOut {
to {
opacity: 0;
}
}
.video-containerA.slide .curtain {
transition: 8s ease-in-out;
transition-delay:1s;
transform: translateY(-100%);
}
@keyframes slide {
to {
transform: translateY(-100%);
}
}
.video-containerB.slide .curtain,
.video-containerC.slide .curtain {
animation: slide 8s ease-in-out forwards;
}
.outer-containerB {
display: flex;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
}
.containerB,
.containerC {
margin: auto;
}
.buttonContainerA,
.buttonContainerB {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-width: 569px;
gap: 10px;
}
.playButton,
.linkButton {
flex-basis: 183px;
/*
width of each button */
margin: 0;
/*
spacing between buttons */
cursor: pointer;
}
.modal {
display: flex;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: auto;
/*background: rgba(0, 0, 0, 0.4);*/
transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
transform: translate(0, -25%);
opacity: 0;
pointer-events: none;
z-index: -99;
border-radius: 50%;
--units: 8px;
--brick1: #222;
--brick2: #222;
--lines: #121212;
--gp-ln: 50%/calc(var(--units) * 10) calc(var(--units) * 5);
--gp-cn: 50%/calc(var(--units) * 5) calc(var(--units) * 5);
background:
repeating-conic-gradient(from 90deg at 95% 55%, var(--lines) 0% 25%, #fff0 0% 100%) var(--gp-cn),
repeating-linear-gradient(180deg, var(--lines) 0 5%, #fff0 0 50%, var(--lines) 0 55%, var(--brick2) 0 100%) var(--gp-ln),
repeating-linear-gradient(90deg, var(--brick1) 0 47.5%, var(--lines) 0 50%, var(--brick1) 0 97.5%, var(--lines) 0 100%) var(--gp-ln);
}
.modal.active {
opacity: 1;
transform: scale(1);
z-index: 1000;
pointer-events: initial;
border-radius: 0;
overflow: auto;
padding: 8px 8px;
}
.inner-modal {
position: relative;
margin: auto;
}
.btnA-primary {
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
}
.btnA,
.btnB {
display: inline-block;
line-height: 1.5;
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background-color: #0d6efd;
border: 1px solid transparent;
box-sizing: border-box;
padding: 6px 12px;
font-size: 16px;
border-radius: 4px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-style: normal;
}
.btnA:hover {
background-color: #0056b3;
border-color: #0a58ca;
color: #ffffff;
}
.played {
border-color: #0a58ca;
background-color: #0056b3;
box-shadow: 0 0 0 2px rgb(255 0 0);
}
.btnB-primary {
color: #2fdcfe;
background-color: #000000;
border-color: #2fdcfe;
}
.btnB {
border: 1px solid #2fdcfe;
}
.btnB:hover {
background-color: #121212;
}
/*.btnA:focus,*/
.btnB:focus {
outline: 0;
box-shadow: 0 0 0 2px rgba(47 254 185 / 100%);
}
.exitA,
.exitB,
.exitC {
transform: translateY(100%);
position: absolute;
inset: auto 0 -6px 0;
/*top: auto;
bottom: -6px;*/
margin: auto;
/*8right: 0;
left: 0;*/
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 2s ease-in;
transition-delay: 1s;
pointer-events: none;
}
.exitA::before,
.exitA::after,
.exitB::before,
.exitB::after,
.exitC::before,
.exitC::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exitA::after,
.exitB::after,
.exitC::after {
transform: rotate(-45deg);
}
.exitA.visible,
.exitB.visible,
.exitC.visible {
opacity: 1;
pointer-events: auto;
cursor: pointer;
}
.exitD,
.close {
position: absolute;
margin: 6px auto 0;
left: 0;
right: 0;
width: 47px;
height: 47px;
background: black;
border-radius: 50%;
border: 5px solid red;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.exitD::before,
.exitD::after,
.close::before,
.close::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: red;
transform: rotate(45deg);
}
.exitD::after,
.close::after {
transform: rotate(-45deg);
}
.containerC {
margin: auto;
background: none;
/*
teal */
}
.flex {
display: flex;
flex-direction: column;
align-items: center;
background: none;
}
.blue-margin-bottom {
margin-bottom: 16px;
background: none;
}
.orange-margin {
margin-left: 12px;
margin-right: 12px;
background: none;
}
.title-text {
margin: 0;
color: #0059dd;
font-size: 20px;
line-height: 1.5;
text-overflow: ellipsis;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
font-family: "Karla", sans-serif;
font-weight: 700;
font-style: normal;
}
.yellow-padding-margin {
margin-top: 4px;
padding-left: 40px;
padding-right: 40px;
background: none;
}
.center-text {
padding: 0;
margin: 0;
text-align: center;
color: #0059dd;
font-size: 16px;
line-height: 1.5;
overflow-wrap: normal;
font-family: "Karla", sans-serif;
font-weight: 500;
font-style: normal;
background: none;
}
.exitE {
position: relative;
margin: 7px auto 0;
inset: 0 0 0 0;
width: 47px;
height: 47px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
background: black;
border-radius: 50%;
border: 5px solid #0059dd;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.exitE::before,
.exitE::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: #0059dd;
transform: rotate(45deg);
}
.exitE::after {
transform: rotate(-45deg);
}
.my-footer {
box-sizing: border-box;
border-top: 1px solid #1155cc;
background: #121212;
text-align: center;
word-wrap: break-word;
padding: 22px 8px 0;
font-family: Verdana, Arial, sans-serif;
font-size: 13.33px;
line-height: 1.5;
vertical-align: baseline;
margin-top: auto;
}
.margin-top {
margin-top: 10px;
}
.my-footer a {
text-decoration: none;
}
.divider::before,
.divider::after {
content: "";
position: relative;
top: 4px;
margin: 0 7.4px;
border: none;
height: 12px;
border-left: 1px solid #f6b26b;
}
.footer-top {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0 0 13px;
padding: 0;
list-style: none;
}
.footer-top li {
display: flex;
}
.footer-top a {
color: #0059dd;
font-weight: 700;
}
.my-footer .green-text {
color: #38761d;
font-weight: 400;
}
.orange-text {
color: #b45f06;
font-weight: 700;
}
.footer-mid {
margin-bottom: 49px;
color: #0059dd;
font-family: Arial, sans-serif;
font-size: 24px;
font-weight: 700;
}
.footer-base {
color: #0059dd;
padding: 0;
}
.outer-containerA.hide,
.video-containerA.hide,
.video-containerB.hide,
.video-containerC.hide,
.outer-containerB.hide,
.containerB.hide,
.containerC.hide {
display: none;
}
<div class="outer-containerA">
<div class="video-containerA">
<button class="exitA" type="button" title="Exit" aria-label="Exit"></button>
<div class="ratio-keeper ">
<div class="video playA"></div>
<div class="curtain "></div>
</div>
<div class="playA"></div>
<div class="spinner"></div>
</div>
<div class="video-containerB hide">
<button class="exitB" type="button" title="Exit" aria-label="Exit"></button>
<div class="ratio-keeper">
<div class="video playB"></div>
<div class="curtain"></div>
</div>
<div class="playB"></div>
<div class="spinner"></div>
</div>
<div class="video-containerC hide">
<button class="exitC" type="button" title="Exit" aria-label="Exit"></button>
<div class="ratio-keeper">
<div class="video playC"></div>
<div class="curtain"></div>
</div>
<div class="playC"></div>
<div class="spinner"></div>
</div>
</div>