Making changes to the CSS now that the play buttons are inside their own container

HTML & CSS
89

Do you understand 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"></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>