Trying to figure out how to get fade to work

I am having trouble, a lot difficulty trying to to remove 1 container, where 2 buttons are currently being used in the code. https://jsfiddle.net/7apg90wz/

Should only 1 container be needed in the html here?

If the answer is yes.

Then, how would it be done?

I have been told by multiple people now, I should only be needing 1 container.

https://jsfiddle.net/7apg90wz/

The idea here would be to add the data-id="" to the buttons, which should allow me to remove the 2nd container from the code.

I have not been able to figure out how to do this.

<div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>
<div class="container play2 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1"></button>
  <button class="playa2 cover" type="button" data-container="play2"></button>
</div>

I am all over the place and have no clear idea on how to remove the 2nd container.

All input and information on how I might be able to achieve this would be welcomed.

I am stuck.

I keep going around in circles.

Here is 1 container:

<div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons:

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play2" data-id="0dgNc5S8cLI"></button>
</div>

What do I do next in the code? https://jsfiddle.net/bLw0p649/

I have been told by multiple people now, I should only be needing 1 container.

They said it is unnecessary duplication where only 1 container is all that should be needed.

The idea here would be to add the data-id="" to the buttons, which should allow me to remove the 2nd container from the code.

I have not been able to figure out how to do this.

How the code works is, after clicking a button a video will appear on the screen, click the X the buttons return to the screen where you can click on the 2nd button and a video will appear on the screen.

Two buttons should be able to run off of one of these, that are inside 1 container, instead of needing multiple containers for each button.

<div class="video video-frame">

Here is the code working with 2 containers: https://jsfiddle.net/7apg90wz/

<div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>
<div class="container play2 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1"></button>
  <button class="playa2 cover" type="button" data-container="play2"></button>
</div>

Removing 1 container I have this now: https://jsfiddle.net/bLw0p649/

The code is not working now because more stuff is needed to be done.

I don’t know what else is needed to be done, or how to achieve this, of being able to remove the 2nd container from the code.

<div class="container play1 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons: Where I attached the data-id="" to them.

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play2" data-id="0dgNc5S8cLI"></button>
</div>

2nd container duplication needs to be removed, but how?

@RandellDawson You were one of the first people to suggest to me to that I should only be using a single container.

I am having a lot of difficulty trying to figure out how to achieve that in the code.

Are you sure this is possible to do in my code?

Maybe it is not achievable?

It is definitely achievable. I refactored you project and was able to accomplish what I suggested in a couple of hours.

I made that suggestion a long time ago when your app was first starting out, but you ignored my advice and kept adding more HTML and then adding band-aid after band-aid of JS in attempt to stitch it all together. That is why when you try to make what should be small changes, become a large change because you have to do it for 100 containers.

My suggestion for you at this point, is to start over, but make sure you have a plan of what you want the finished project to be and then build it in pieces that fit together without repeating code (when you right something more than one that is 90% the same), then you create a function to call instead.

I’m only trying to do it where there is only 2 containers, not 100.

I’m trying to reduce the 2 containers down to 1 container.

Are you able to show me, provide more information on how I can achieve that?

I wanted to see it working in the code.

Is this something I am able to do in the code now, so I am able to see it?

I have been stuck on this.

Here is the code working with 2 containers: https://jsfiddle.net/7apg90wz/

Removing 1 container I have this now: https://jsfiddle.net/bLw0p649/

Where I added data-id=""> to the buttons.

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>
<div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

I’m looking for help with this if you’re able to figure it out, how it would be achieved in the code. @kevinSmith @colinthornton @lasjorg

I can’t seem to be able to figure out how to remove the 2nd container from this code.

Can you see if you are able to provide any help on this.

My HTML is repetitive. Since I only show one player at a time, I should only have a single container.

I’m already using data-container on each button to figure out which video container I want to play.

Instead I want to have a single video player element/container, and just pass the corresponding data-id directly from the button instead. Where I can then instantiate the video player in the same process to load only the video that is clicked.

So for example, I’m using play2 to go find a video container named play2 and doing actions to show that specific container. In that container I have an element that has the data-id of my YouTube video -Xgi_way56U

So instead of creating a playX container for every single video, I want to put -Xgi_way56U on the button instead. When the button is clicked, I want to take that ID and pass it into the video player element to load it on demand.

The idea here would be to attach the id

data-id="-Xgi_way56U"

to here:

<button class="playa2 cover" type="button" data-container="play1"></button>

Which would then become this:

<button class="playa2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

I have been told by multiple people now, I should only be needing 1 container.

They said it is unnecessary duplication where only 1 container is all that should be needed.

The idea here would be to add the data-id="" to the buttons, which should allow me to remove the 2nd container from the code.

I have not been able to figure out how to do this.

How the code works is, after clicking a button a video will appear on the screen, click the X the buttons return to the screen where you can click on the 2nd button and a video will appear on the screen.

Two buttons should be able to run off of one of these, that are inside 1 container, instead of needing multiple containers for each button.

<div class="video video-frame">

Here is the code working with 2 containers: https://jsfiddle.net/7apg90wz/

 <div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>
<div class="container play2 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1"></button>
  <button class="playa2 cover" type="button" data-container="play2"></button>
</div>

Removing 1 container I have this now: https://jsfiddle.net/82rxzq7h/

The code is not working now because more stuff is needed to be done.

I don’t know what else is needed to be done, or how to achieve this, of being able to remove the 2nd container from the code.

 <div class="container play1 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons: Where I attached the data-id="" to them.

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

Right, so you need to change the data-id value? So, presumably, if I understand …

  1. Push the play button, it calls a function.
  2. That function gets the data it needs, either being passed to it or as a property of that play button or some other value in state.
  3. That function manipulates the DOM to put that value on the video element.
  4. The function starts the video.

Does that makes sense? How far down that list have you gotten?

This was my attempt: https://jsfiddle.net/r3ny1pcm/

When clicking the buttons, clicking on the 1st button produces a video.

When clicking the 2nd button, no video is appearing on the screen.

   var playButtons = document.querySelectorAll('button.cover');

    for (var button of playButtons) {
      button.addEventListener('click', function() {
        var videoContainer = document.querySelector('.video');
        videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
      });
    }
<div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

You didn’t answer my question. Does that mean that you feel you’ve completed all of them?

So, have you confirmed them? Have you confirmed, step by step?

  1. Pushing the button calls the function.
  2. The function gets the data it needs.
  3. The function changes the DOM. Changes it correctly?
  4. The function starts the video.

This is how I would figure this out.

If I put this one in by itself, the video will show.

<div class="playButtonContainer with-curtain">
<button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
</div>

If I put this one in by itself, the video will show.

<div class="playButtonContainer with-curtain">
<button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

But when they are together, for some reason both videos are not appearing.

<div class="playButtonContainer with-curtain">
<button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
<button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

When clicking on the 2nd button I am receiving an error in the console log.

It points to line 279.

jsitor is good at telling you what line the errors are on. https://jsitor.com/7o1dzmVCAu

el.classList.remove("hide");

Is there something that would be done in the code that would fix this, allowing for the 2nd button to be able to produce a video?

When I click on the 1st play button, null appears in console log.

https://jsitor.com/7o1dzmVCAu

https://jsfiddle.net/fcp4sLmg/

JavaScript:Copy to clipboard
function show(el) {
    el.classList.remove("hide");
    console.log("null");
  }
    const playerVars = {
      autoplay: 0,
      controls: 1,
      disablekb: 1,
      enablejsapi: 1,
      fs: 0,
      iv_load_policy: 3
    };
    const defaults = {
      height: 360,
      host: "https://www.youtube-nocookie.com",
      playerVars,
      width: 640
    };

    function show(el) {
      el.classList.remove("hide");
    }

I’m working on trying to debug it.

It’s almost good, except for the fact that only one button is working, the other one works also, it just doesn’t produce a video.

At this link here: https://jsfiddle.net/j481nk7o/

I placed an if statement here that removed the error:

 function initPlayer(wrapper, playerOptions) {
    if (typeof wrapper !== 'undefined' && wrapper !== null) {
     show(wrapper); 
    const player = createPlayer(wrapper, playerOptions);
    wrapper.player = player;
    }
  }

Still, only 1 video appears after clicking the 1st button.
No video appears after clicking the 2nd button.

var playButtons = document.querySelectorAll('button.cover');

for (var button of playButtons) {
  button.addEventListener('click', function () {
    var videoContainer = document.querySelector('.video');
    videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
  });
}
<div class="playButtonContainer with-curtain">
	<button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
	<button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

One Container Code

At this link here: https://jsfiddle.net/c46koats/

I removed the animation code, and some of the javascript that is not needed for testing it.

Reducing it down to smaller code.

How the code is supposed to work is, after clicking on a button a video is supposed to appear on the screen, Clicking the X button returns you back to the buttons.

What is occurring: After clicking on the 1st button a video appears on the screen.

After clicking on the 2nd button, no video appears on the screen.

What seems to be the issue here that is causing the 2nd button when clicked, not to produce a video on the screen, and how would that be fixed in the code?

No errors are present in the code either.

<div class="container play1 with-curtain">
	<div class="inner-container curtain ">
		<div class="ratio-keeper">
			<div class="wrap">
				<div class="video video-frame"></div>
			</div>
		</div>
		<button class="exit" type="button" title="Exit" aria-label="Close"></button>
	</div>
</div>

<div class="playButtonContainer with-curtain">
	<button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
	<button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>
var playButtons = document.querySelectorAll('button.cover');

for (var button of playButtons) {
  button.addEventListener('click', function() {
    var videoContainer = document.querySelector('.video');
    videoContainer.setAttribute('data-id', button.getAttribute('data-id'))
  });
}

I was just told: it has to do with this part of the code:

It’s returning undefined for the second video.

  function getWrapper(cover) {
    const index = players.findIndex(
      (player) => player.cover === cover
    );
    return players[index].wrapper;
  }