If I wanted to add one on page 2 or 3, how would that work in the code?
As an example.
How would that functionality be added?
1 Like
I would do it the same way I did the exit buttons in my demo. You can use the same buttons but just add a different destination. Easy!!
That’s why my version is easier to change as you can have as many containers as you need and just link to them accordingly.
In your version you would need to set up two new back buttons and then call the same code as you did for exit but in reverse.
Something like this for the first one:
function backClickHandler() {
const thewrap = document.querySelector(".container2");
hide(thewrap);
const cover = document.querySelector(".container1");
show(cover);
}
const backButton = document.querySelector(".back");
backButton.addEventListener("click", backClickHandler);
The html would be this but you’d need to style and position it as you wanted.
<button class="back" type="button" aria-label="Back"></button>
Then you’d need to do all the same (css,js and html) for back button2 but change the container references .
In my example no js was changed at all.
1 Like
Relevant code from your demo.
(function showContainer2() {
function hide(el) {
el.classList.add("hide");
}
function show(el) {
el.classList.remove("hide");
}
function exitClickHandler() {
const thewrap = document.querySelector(".container2");
show(thewrap);
const cover = document.querySelector(".container1");
hide(cover);
}
const cover = document.querySelector(".exit");
cover.addEventListener("click", exitClickHandler);
function backClickHandler() {
const thewrap = document.querySelector(".container2");
hide(thewrap);
const cover = document.querySelector(".container1");
show(cover);
}
const backButton = document.querySelector(".back");
backButton.addEventListener("click", backClickHandler);
function back2ClickHandler() {
const thewrap = document.querySelector(".container3");
hide(thewrap);
const cover = document.querySelector(".container2");
show(cover);
}
const backButton2 = document.querySelector(".back2");
backButton2.addEventListener("click", back2ClickHandler);
})();
<div class="container1 ">
<div class="curtain1 remove">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<g id="fan">
<path fill="#000" stroke="#000"
d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
</g>
</svg>
</div>
<div class="cross"></div>
<div class="video-one"></div>
<div class="wrap embed-youtube ">
<div class="video embed-youtube " data-id="djV11Xbc914">
</div>
<button class="playa cover playgreen embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
<button class="exit" type="button" aria-label="Open"></button>
</div>
</div>
<div class="container2 hide">
<div class="container ">
<div class="curtain remove">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<use href="#fan" />
</svg>
</div>
<div class="cross"></div>
<div class="video-two"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playb cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<use href="#fan" />
</svg>
</div>
<div class="cross"></div>
<div class="video-three"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playc cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<use href="#fan" />
</svg>
</div>
<div class="cross"></div>
<div class="video-four"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playd cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<use href="#fan" />
</svg>
</div>
<div class="cross"></div>
<div class="video-five"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playe cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<use href="#fan" />
</svg>
</div>
<div class="cross"></div>
<div class="video-six"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playf cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
<button class="exit exit2" type="button" aria-label="Open"></button>
<button class="back" type="button" aria-label="Back">Back</button>
</div>
</div>
</div>
<div class="container3 hide">
<div class="container ">
<div class="curtain remove">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<use href="#fan" />
</svg>
</div>
<div class="cross"></div>
<div class="video-seven"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playg cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<use href="#fan" />
</svg>
</div>
<div class="cross"></div>
<div class="video-eight"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playh cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<use href="#fan" />
</svg>
</div>
<div class="cross"></div>
<div class="video-nine"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playi cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<use href="#fan" />
</svg>
</div>
<div class="cross"></div>
<div class="video-ten"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playj cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
<div class="curtain remove">
<div class="ratio-keeper">
<div class="fence">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="fan">
<svg width="70%" height="70%" viewBox="76 130 381 381">
<use href="#fan" />
</svg>
</div>
<div class="cross"></div>
<div class="video-eleven"></div>
<div class="wrap embed-youtube">
<div class="video embed-youtube" data-id="djV11Xbc914">
</div>
<button class="playk cover embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
<button class="back2" type="button" aria-label="Back">Back</button>
</div>
</div>
</div>
.back,.back2{
position:absolute;
z-index:2;
top:-40px;
left:50%;
transform:translateX(-50%)
}
1 Like
I would want the exit/back buttons to both remove players if they are run, currently they do that now.
The back button functionality hasn’t been added to the blue exit button yet.
The removePlayers are working now, meaning, after clicking a video then clicking the red exit/next button or blue exit/previous button, videos are removed if they are run.
How do I attach the back button to the blue exit button without breaking that?
https://jsfiddle.net/xu7ajzbk/
function removePlayerHandler(evt) {
const el = evt.target;
let container = el.closest(".container");
let wrappers;
if (container) { //if multiple players
wrappers = container.querySelectorAll(".remove .wrap");
} else { //if single player
container = el.closest(".remove");
wrappers = container.querySelectorAll(".wrap");
}
wrappers.forEach(function(wrapper) {
if (wrapper.player) {
removePlayer(wrapper);
}
});
}
I think my example at the top is using the same exit routine for the back button so should have the same function already but as the videos don’t work I can’t check.
With your multiple container approach I’m afraid you’ll need a js guru to sort it out as the code jumps around too much for me. I can’t follow the flow at all 
What do you mean the videos don’t work, they go on when you press the play button.
Are you able to get one of the blue play buttons to go to the previous page?
Not on the version that I based my example on.
It says video unavailable on the first one and then nothing on the next page. I just assumed it was either a codepen issue with your videos or that it just wasn’t in place when testing the fade out and in and the back button function.
It says video is unavailable.
How come the videos are visible to me?
Yes in your code there in the codepen the videos can’t be seen.
Yes so am I. Still not working.
I can see the video in Firefox though so maybe something is blocking it in my Chrome. Probably some security setting somewhere.
No one has ever mentioned that to me about this code, and I’m sure they would if they couldn’t see videos appearing.
Can’t help someone figure out how to remove a player without being able to see the video.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.