Trying to figure out how to get fade to work

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

}());

What outline are you talking about?

Also, what you describe for the first video does not seem to work when I click the play button. If I click on the play button of the first video, the area inside the video frame immediately turns black and then about 3 seconds later, it comes back in (but does not fade back in).

Now, if I click anywhere in the video frame except the play button, I see a fade out effect (the video area fades to black).

I think you need to give us more details in exactly what you have to happen when clicking on the background inside the video frame vs. clicking on the play button and what you mean by fade effect. Do you mean fade in or fade out or both and when should they happen?

On a side note, why do you have two separate IIFE’s? Why not just have a single IIFE?

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

  function openCurtain(cover) {
    /* hide(cover);*/
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
  }

When this function runs, it is just going to target the first curtain. querySelector will only get the first element the selector matches.

1 Like

What am I supposed to change that to to fix the issue?

Research how to target the parent nodes of an element. The curtain is two parents above each div with class="embed-youtube".

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

Look how deep the embeded video is in relation to the current you want to target.

	<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>

How many parents do you need to go back to reach the correct curtain for a give video?

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

You went one too many back.

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?

That is because you need to modify openCurtain with the applicable code. It is still targeting the first div with class="curtain".

This line gets changed to something else.


const curtain = document.querySelector(".curtain");

I tried changing .curtain to .embed-youtube

That didn’t work.

What does openCurtain look like now?

https://jsfiddle.net/es07ya62/1/

  function openCurtain(cover) {
    const curtain = document.querySelector(".embed-youtube");
    curtain.classList.add("slide");
    return curtain;
  }

This targets the first element on the page with class="embed-youtube"? Why do you want to target that?

Can you show the code for coverClickHandler function? You call openCurrent and pass and argument, don’t you?

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