Removing Extremely Repetitive Html and JS

I am trying to figure out how to do this in the code.

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

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

There are only 3 containers, and 3 buttons.

My HTML and JS is extremely repetitive. Since I only show one player at a time, I should just have 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).

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

The user would click on a button that would execute a function that would do something similar to what my 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 me to 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>

And

   players.add(".playa1", {});
    players.add(".playa2", {});
    players.add(".playa3", {});
    players.add(".playa4", {});
    players.add(".playa5", {});
    players.add(".playa6", {});
    players.add(".playa7", {});
    players.add(".playa8", {});
    players.add(".playa9", {});
    players.add(".playa10", {});

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>

Continuing the discussion from Making changes to the CSS now that the play buttons are inside their own container: