How to add data-id to button, Using YouTube API [duplicate]

The javascript I am using here is following YouTube's Api.

https://developers.google.com/youtube/iframe_api_reference

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

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

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

Am I right?

https://jsfiddle.net/7apg90wz/

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.

function onYouTubeIframeAPIReady() {  
  players.add(".playa1", {});
  players.add(".playa2", {});
}

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