Trying to figure out how to get fade to work

This code is set up in a similar way and there is no issue, how come? https://jsfiddle.net/oehdvnz0/

It may just be that the element clicked is not a child element of an element with the class container or the class remove.

Can that part of the code be written differently in some way where that error won’t appear?

After this line, put: console.log(container). Do you see a problem?

It says null.

That is because there is no video on that page.

Nothing to remove.

This function has too many statements warning message in jsfiddle.

How can that be adjusted or fixed in the code so that I am not receiving that warning message?

https://jsfiddle.net/k6q4c2j3/

It goes up to 100.

function onYouTubeIframeAPIReady() {
    players.add(".playa1", {});
    players.add(".playa2", {});
    players.add(".playa3", {});
    players.add(".playa4", {});
    players.add(".playa5", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });

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 play3 to go find a video container named play3 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="playa1 cover" type="button" data-container="play1"></button>

Which would then become this:

<button class="playa3 cover" type="button" data-container="play3" data-id="-Xgi_way56U"></button>

At this link here: https://jsfiddle.net/7w5ne4s1/

There are only 3 containers, and 3 buttons.

I reduced it in size so it is easier.

Is this something you will be able to show me how to implement?

Is this something that I am able to do in the code?

Can any of that, what I am thinking be done in the code?

Is there someone who can show me how to do this?

Doing that would allow me to use one container.

Reduce duplication in the html.

<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="-Xgi_way56U"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

<div class="container play3 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="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1"></button>
  <button class="playa2 cover" type="button" data-container="play2"></button>
  <button class="playa3 cover" type="button" data-container="play3"></button>
</div>

Using one container, reducing duplication in the html

I was shown this code without any instruction on how to implement it.

Doing this will allow me to use or only need one container, reducing duplication.

How would I have it work in the code?

If I would be writing it this way, or a different way, with this part improved.

<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="playa3 cover" type="button" data-container="play3" data-id="-Xgi_way56U"></button>
  <!-- -->
</div>
<script>
  document.querySelectorAll('button[data-id]')
  .forEach((button) => {
    button.addEventListener('click', (e) => {
       document.querySelector('.video').dataset.id = e.target.dataset.id;
       // do stuff
       // e.g., set src of <video> element or other media player
    })
  })
</script>

It would replace this: https://jsfiddle.net/7x6j1s8p/

<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="-Xgi_way56U"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

<div class="container play3 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="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1"></button>
  <button class="playa2 cover" type="button" data-container="play2"></button>
  <button class="playa3 cover" type="button" data-container="play3"></button>
</div>

Your HTML and JS is extremely repetitive. Since you only show one player at a time, I strongly suggest just having a single container like:

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

Then, I would create an object containing all the players (containing an object with dataId, class name, and the corresponding playlist object).

You could iterate through the array to create all the buttons with the value attribute containing the corresponding dataId for the player or you could use your existing data-container to be able to reference which player you want to active.

The user would click on a button that would execute a function that would do something similar to what your onYouTubeIframeAPIReady function does. It would add that applicable class to the container and load the applicable playlist.

Everything else basically would work the same as it already does. This would allow you to get rid of:

 <button class="playa1 cover" type="button" data-container="play1"></button>
   <button class="playa2 cover" type="button" data-container="play2"></button>
   <button class="playa3 cover" type="button" data-container="play3"></button>
   <button class="playa4 cover" type="button" data-container="play4"></button>
   <button class="playa5 cover" type="button" data-container="play5"></button>
   <button class="playa6 cover" type="button" data-container="play6"></button>
   <button class="playa7 cover" type="button" data-container="play7"></button>
   <button class="playa8 cover" type="button" data-container="play8"></button>
   <button class="playa9 cover" type="button" data-container="play9"></button>
   <button class="playa10 cover" type="button" data-container="play10"></button>
   <button class="playa11 cover" type="button" data-container="play11"></button>
   <button class="playa12 cover" type="button" data-container="play12"></button>
   <button class="playa13 cover" type="button" data-container="play13"></button>
   <button class="playa14 cover" type="button" data-container="play14"></button>
   <button class="playa15 cover" type="button" data-container="play15"></button>
   <button class="playa16 cover" type="button" data-container="play16"></button>
   <button class="playa17 cover" type="button" data-container="play17"></button>
   <button class="playa18 cover" type="button" data-container="play18"></button>
   <button class="playa19 cover" type="button" data-container="play19"></button>
   <button class="playa20 cover" type="button" data-container="play20"></button>
   <button class="playa21 cover" type="button" data-container="play21"></button>
   <button class="playa22 cover" type="button" data-container="play22"></button>
   <button class="playa23 cover" type="button" data-container="play23"></button>
   <button class="playa24 cover" type="button" data-container="play24"></button>
   <button class="playa25 cover" type="button" data-container="play25"></button>
   <button class="playa26 cover" type="button" data-container="play26"></button>
   <button class="playa27 cover" type="button" data-container="play27"></button>
   <button class="playa28 cover" type="button" data-container="play28"></button>
   <button class="playa29 cover" type="button" data-container="play29"></button>
   <button class="playa30 cover" type="button" data-container="play30"></button>
   <button class="playa31 cover" type="button" data-container="play31"></button>
   <button class="playa32 cover" type="button" data-container="play32"></button>
   <button class="playa33 cover" type="button" data-container="play33"></button>
   <button class="playa34 cover" type="button" data-container="play34"></button>
   <button class="playa35 cover" type="button" data-container="play35"></button>
   <button class="playa36 cover" type="button" data-container="play36"></button>
   <button class="playa37 cover" type="button" data-container="play37"></button>
   <button class="playa38 cover" type="button" data-container="play38"></button>
   <button class="playa39 cover" type="button" data-container="play39"></button>
   <button class="playa40 cover" type="button" data-container="play40"></button>
   <button class="playa41 cover" type="button" data-container="play41"></button>
   <button class="playa42 cover" type="button" data-container="play42"></button>
   <button class="playa43 cover" type="button" data-container="play43"></button>
   <button class="playa44 cover" type="button" data-container="play44"></button>
   <button class="playa45 cover" type="button" data-container="play45"></button>
   <button class="playa46 cover" type="button" data-container="play46"></button>
   <button class="playa47 cover" type="button" data-container="play47"></button>
   <button class="playa48 cover" type="button" data-container="play48"></button>
   <button class="playa49 cover" type="button" data-container="play49"></button>
   <button class="playa50 cover" type="button" data-container="play50"></button>
   <button class="playa51 cover" type="button" data-container="play51"></button>
   <button class="playa52 cover" type="button" data-container="play52"></button>
   <button class="playa53 cover" type="button" data-container="play53"></button>
   <button class="playa54 cover" type="button" data-container="play54"></button>
   <button class="playa55 cover" type="button" data-container="play55"></button>
   <button class="playa56 cover" type="button" data-container="play56"></button>
   <button class="playa57 cover" type="button" data-container="play57"></button>
   <button class="playa58 cover" type="button" data-container="play58"></button>
   <button class="playa59 cover" type="button" data-container="play59"></button>
   <button class="playa60 cover" type="button" data-container="play60"></button>
   <button class="playa61 cover" type="button" data-container="play61"></button>
   <button class="playa62 cover" type="button" data-container="play62"></button>
   <button class="playa63 cover" type="button" data-container="play63"></button>
   <button class="playa64 cover" type="button" data-container="play64"></button>
   <button class="playa65 cover" type="button" data-container="play65"></button>
   <button class="playa66 cover" type="button" data-container="play66"></button>
   <button class="playa67 cover" type="button" data-container="play67"></button>
   <button class="playa68 cover" type="button" data-container="play68"></button>
   <button class="playa69 cover" type="button" data-container="play69"></button>
   <button class="playa70 cover" type="button" data-container="play70"></button>
   <button class="playa71 cover" type="button" data-container="play71"></button>
   <button class="playa72 cover" type="button" data-container="play72"></button>
   <button class="playa73 cover" type="button" data-container="play73"></button>
   <button class="playa74 cover" type="button" data-container="play74"></button>
   <button class="playa75 cover" type="button" data-container="play75"></button>
   <button class="playa76 cover" type="button" data-container="play76"></button>
   <button class="playa77 cover" type="button" data-container="play77"></button>
   <button class="playa78 cover" type="button" data-container="play78"></button>
   <button class="playa79 cover" type="button" data-container="play79"></button>
   <button class="playa80 cover" type="button" data-container="play80"></button>
   <button class="playa81 cover" type="button" data-container="play81"></button>
   <button class="playa82 cover" type="button" data-container="play82"></button>
   <button class="playa83 cover" type="button" data-container="play83"></button>
   <button class="playa84 cover" type="button" data-container="play84"></button>
   <button class="playa85 cover" type="button" data-container="play85"></button>
   <button class="playa86 cover" type="button" data-container="play86"></button>
   <button class="playa87 cover" type="button" data-container="play87"></button>
   <button class="playa88 cover" type="button" data-container="play88"></button>
   <button class="playa89 cover" type="button" data-container="play89"></button>
   <button class="playa90 cover" type="button" data-container="play90"></button>
   <button class="playa91 cover" type="button" data-container="play91"></button>
   <button class="playa92 cover" type="button" data-container="play92"></button>
   <button class="playa93 cover" type="button" data-container="play93"></button>
   <button class="playa94 cover" type="button" data-container="play94"></button>
   <button class="playa95 cover" type="button" data-container="play95"></button>
   <button class="playa96 cover" type="button" data-container="play96"></button>
   <button class="playa97 cover" type="button" data-container="play97"></button>
   <button class="playa98 cover" type="button" data-container="play98"></button>
   <button class="playa99 cover" type="button" data-container="play99"></button>
   <button class="playa100 cover" type="button" data-container="play100"></button>

AND

    players.add(".playa1", {});
    players.add(".playa2", {});
    players.add(".playa3", {});
    players.add(".playa4", {});
    players.add(".playa5", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    players.add(".playa6", {});
    players.add(".playa7", {});
    players.add(".playa8", {});
    players.add(".playa9", {});
    players.add(".playa10", {});
    players.add(".playa11", {});
    players.add(".playa12", {});
    players.add(".playa13", {});
    players.add(".playa14", {});
    players.add(".playa15", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    players.add(".playa16", {});
    players.add(".playa17", {});
    players.add(".playa18", {});
    players.add(".playa19", {});
    players.add(".playa20", {});
    players.add(".playa21", {});
    players.add(".playa22", {});
    players.add(".playa23", {});
    players.add(".playa24", {});
    players.add(".playa25", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    players.add(".playa26", {});
    players.add(".playa27", {});
    players.add(".playa28", {});
    players.add(".playa29", {});
    players.add(".playa30", {});
    players.add(".playa31", {});
    players.add(".playa32", {});
    players.add(".playa33", {});
    players.add(".playa34", {});
    players.add(".playa35", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    players.add(".playa36", {});
    players.add(".playa37", {});
    players.add(".playa38", {});
    players.add(".playa39", {});
    players.add(".playa40", {});
    players.add(".playa41", {});
    players.add(".playa42", {});
    players.add(".playa43", {});
    players.add(".playa44", {});
    players.add(".playa45", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    players.add(".playa46", {});
    players.add(".playa47", {});
    players.add(".playa48", {});
    players.add(".playa49", {});
    players.add(".playa50", {});
    players.add(".playa51", {});
    players.add(".playa52", {});
    players.add(".playa53", {});
    players.add(".playa54", {});
    players.add(".playa55", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    players.add(".playa56", {});
    players.add(".playa57", {});
    players.add(".playa58", {});
    players.add(".playa59", {});
    players.add(".playa60", {});
    players.add(".playa61", {});
    players.add(".playa62", {});
    players.add(".playa63", {});
    players.add(".playa64", {});
    players.add(".playa65", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    players.add(".playa66", {});
    players.add(".playa67", {});
    players.add(".playa68", {});
    players.add(".playa69", {});
    players.add(".playa70", {});


    players.add(".playa71", {});
    players.add(".playa72", {});
    players.add(".playa73", {});
    players.add(".playa74", {});
    players.add(".playa75", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    players.add(".playa76", {});
    players.add(".playa77", {});
    players.add(".playa78", {});
    players.add(".playa79", {});
    players.add(".playa80", {});
    players.add(".playa81", {});
    players.add(".playa82", {});
    players.add(".playa83", {});
    players.add(".playa84", {});
    players.add(".playa85", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    players.add(".playa86", {});
    players.add(".playa87", {});
    players.add(".playa88", {});
    players.add(".playa89", {});
    players.add(".playa90", {});
    players.add(".playa91", {});
    players.add(".playa92", {});
    players.add(".playa93", {});
    players.add(".playa94", {});
    players.add(".playa95", {
        playerVars: {
            playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
        }
    });
    players.add(".playa96", {});
    players.add(".playa97", {});
    players.add(".playa98", {});
    players.add(".playa99", {});
    players.add(".playa100", {});

AND

<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 play100 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>
1 Like

Thank you for your input.

Wouldn’t I still have 100 lines somewhere in the code though?

The first thing I would like to do in the code is reduce the containers down to 1.

Can you ore someone on here show me how to do that?

Here I have 3 containers, in the code, how would I reduce it down to 1 container?

https://jsfiddle.net/q0fmj97h/

<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="container play3 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="CHahce95B1g"></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>
  <button class="playa3 cover" type="button" data-container="play3"></button>
</div>

How to add data-id to button

Can you help me? https://jsfiddle.net/q0fmj97h/

What I am trying to do in the code is add the data-id:

data-id="-Xgi_way56U"

to the button.

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

Which would then become this:

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

<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="playa3 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <!-- -->
</div>

Currently, I have 3 containers: Placing the data-id on the button will allow me to remove 2 containers from the html.

<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="container play3 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="CHahce95B1g"></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>
  <button class="playa3 cover" type="button" data-container="play3"></button>
</div>

At this link here I was able to get the first button working, using a single container.

How do I get the 2nd button working also?

https://jsfiddle.net/uygqk36e/

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

<script>
  document.querySelectorAll('button[data-id]')
    .forEach((button) => {
      button.addEventListener('click', (e) => {

        document.querySelector('.video').dataset.id = e.target.dataset.id;
        button.setAttribute('data-id', '-Xgi_way56U');
        button.setAttribute('data-id', '0dgNc5S8cLI');
      })
    })

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

And I don’t even know if I am doing that the right way.

I think I am doing it the wrong way.

Right now, that is what I am working on, reducing the containers in the html down to 1 container.

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

Which is something that has been told to me now more than one time.

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

in the code here: https://jsfiddle.net/7apg90wz/

Where 2 containers are being used, I am trying to remove one of them.