The outline, when I click on the first video, it fades in how it is supposed to.
After the play button is clicked.
When I click on the other videos it doesn’t work.
I have no idea how to fix it so that the outline fades in on all of them, not just one.
Each button you click on, the outline should feae in for each one.
https://jsfiddle.net/xLkngsyd/
https://jsitor.com/kDARJVjvu
.curtain::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid #333;
pointer-events: none;
}
.curtain.slide::after {
outline: 1px solid #0059dd;
transition: outline 2s ease-in;
}
(function initCover() {
/* function show(el) {
el.classList.remove("hide");
}*/
/* function hide(el) {
el.classList.add("hide");
}*/
function openCurtain(cover) {
/* hide(cover);*/
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
return curtain;
}
/*function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}*/
function coverClickHandler(evt) {
const cover = evt.currentTarget.parentElement;
const curtain = openCurtain(cover);
/* showVideo(curtain);*/
}
const covers = document.querySelectorAll(".embed-youtube-play");
covers.forEach(function addHandler(cover) {
cover.addEventListener("click", coverClickHandler);
});
}());
The blue line around the player.
Clicking on the first player causes it to appear.
When the other play buttons are clicked, they don’t appear.
It should go from gray to blue after it is clicked on.
Only occurs on the first video.
This is the first thing I am trying to fix.
I have been trying to figure out how to resolve the issue.
.curtain::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
outline: 1px solid #333;
pointer-events: none;
}
.curtain.slide::after {
outline: 1px solid #0059dd;
transition: outline 2s ease-in;
}
What am I supposed to change that to to fix the issue?
This?
const cover = evt.currentTarget.parentElement;
I tried that here and it did not work.
https://jsfiddle.net/p563n2h9/
function coverClickHandler(evt) {
const cover = evt.currentTarget.parentElement;
const curtain = openCurtain(cover);
}
<div class="curtain">
<div class="ratio-keeper">
<!-- 1. Video Wrapper Container -->
<div class="embed-youtube " data-video-id="djV11Xbc914">
<!-- 2. The preview button that will contain the Play icon -->
<button class="embed-youtube-play" type="button" aria-label="Open"></button>
</div>
</div>
</div>
3
That didn’t work in the code: https://jsfiddle.net/ky2pqmhw/1/
function coverClickHandler(evt) {
const cover = evt.currentTarget.parentElement.parentElement.parentElement;
const curtain = openCurtain(cover);
}
2 doesn’t work in the code either.
https://jsfiddle.net/ky2pqmhw/2/
function coverClickHandler(evt) {
const cover = evt.currentTarget.parentElement.parentElement;
const curtain = openCurtain(cover);
It’s still not working though. The outline still only fades in after the first video button is clicked. None of the other outlines fade in on the other players.
Were you able to get it to work?
This line gets changed to something else.
const curtain = document.querySelector(".curtain");
I tried changing .curtain to .embed-youtube
That didn’t work.
https://jsfiddle.net/es07ya62/1/
function openCurtain(cover) {
const curtain = document.querySelector(".embed-youtube");
curtain.classList.add("slide");
return curtain;
}
lasjorg
October 30, 2022, 4:02pm
19
It should be 3 levels up and you need to use the cover parameter, not curtain inside the function. cover is the element you are passing to the function as the argument.
Unless I’m not understanding what you are trying to do.
Edit: this?
1 Like
function coverClickHandler(evt) {
const cover = evt.currentTarget.parentElement.parentElement;
const curtain = openCurtain(cover);
}
Is this good now? https://jsfiddle.net/jd3r7uxe/
Is this whatI am wanting to do, or no?
(function initCover() {
/* function show(el) {
el.classList.remove("hide");
}*/
/* function hide(el) {
el.classList.add("hide");
}*/
function openCurtain(cover) {
//hide(cover);
const curtain = document.querySelector(".curtain");
cover.classList.add("slide");
return curtain;
}
/*function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}*/
function coverClickHandler(evt) {
const cover = evt.currentTarget.parentElement.parentElement.parentElement;
console.log(cover)
const curtain = openCurtain(cover);
/* showVideo(curtain);*/
}
const covers = document.querySelectorAll(".embed-youtube-play");
covers.forEach(function addHandler(cover) {
cover.addEventListener("click", coverClickHandler);
});
}());
lasjorg
October 30, 2022, 4:09pm
24
I mean that is how I understood what you asked for. But we really can’t answer that for you. Is it working as intended or not?
Doing it your way, what else needs to be fixed here?
https://jsfiddle.net/3ae1mu8q/1/
function openCurtain(cover) {
const curtain = document.querySelector(".embed-youtube");
curtain.classList.add("slide");
return curtain;
}
/*function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}*/
function coverClickHandler(evt) {
const curtain = evt.currentTarget.parentElement.parentElement;
openCurtain(curtain);
/* const cover = evt.currentTarget.parentElement.parentElement;
const curtain = openCurtain(cover);*/
/* showVideo(curtain);*/
}
const covers = document.querySelectorAll(".embed-youtube-play");
covers.forEach(function addHandler(cover) {
cover.addEventListener("click", coverClickHandler);
});
}());
lasjorg
October 30, 2022, 4:17pm
28
For this CSS to work
.curtain.slide::after {
outline: 1px solid #0059dd;
transition: outline 2s ease-in;
}
The element with the class curtain should be given the class slide which is what you are doing now in that code.
Why don’t you at least answer if it is working as you wanted?
What does openCurtain(cover); pass to the openCurtain function?
curtain.classList.add("slide");
It is, but I am doing it the other way now.
It passes the cover.
function openCurtain(cover) {
to
const curtain = openCurtain(cover);
https://jsfiddle.net/3ae1mu8q/2/
(function initCover() {
/* function show(el) {
el.classList.remove("hide");
}*/
/* function hide(el) {
el.classList.add("hide");
}*/
function openCurtain(cover) {
const curtain = document.querySelector(".curtain");
curtain.classList.add("slide");
return curtain;
}
/*function showVideo(curtain) {
const thewrap = curtain.parentElement.querySelector(".wrap");
show(thewrap);
}*/
function coverClickHandler(evt) {
const cover = evt.currentTarget.parentElement.parentElement;
const curtain = openCurtain(cover);
/*const curtain = evt.currentTarget.parentElement.parentElement;
openCurtain(curtain);*/
/* showVideo(curtain);*/
}
const covers = document.querySelectorAll(".embed-youtube-play");
covers.forEach(function addHandler(cover) {
cover.addEventListener("click", coverClickHandler);
});
}());
