For removePlayer to work in code, html may need to be fixed

As you can see in this demo, each video is able to be removed by clicking the exit button.
Play the video, then click the exit.

https://jsfiddle.net/c6uysomw/

   function removePlayerHandler(evt) {
    const el = evt.target;
    const container = el.closest(".curtain");
    const wrapper = container.querySelector(".wrap");
    if (wrapper.player) {
      return removePlayer(wrapper);
    }
  }

How would the html in this code be readjusted for that part of the code to be able to work?

https://jsfiddle.net/bt8ze54r/

Currently it is written as this:

Cannot read properties of null (reading ‘querySelector’)"

   function removePlayerHandler(evt) {
    const el = evt.target;
    const container = el.closest(".curtain");
    const wrapper = container.querySelector(".wrap");
    if (wrapper.player) {
      return removePlayer(wrapper);
    }
  }

And the html looks like this:

<div class="container1 ">
  <div class="curtain1">
    <div class="ratio-keeper">
      <div class="fence">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="fan fan1">
        <svg width="70%" height="70%" viewBox="76 130 381 381">
          <g id="fan">
            <path fill="#000" stroke="#000" d="m166.3352 168.6294c5.5396 2.4448 45.2339 54.394 72.7499 91.0151-9.1901-44.8757-21.7959-109.0279-19.9558-114.796 4.1462-12.9949 33.7039-13.5172 41.5845-13.7579 7.8827-.2415 37.4165-1.5221 42.3488 11.1948 2.1872 5.6436-6.4773 70.4506-12.9142 115.8007 25.2309-38.2323 61.6818-92.5089 67.0612-95.2865 12.119-6.2568 33.3898 14.2749 39.1337 19.6768 5.7424 5.402 27.5341 25.3815 22.0294 37.859-2.4441 5.5389-54.3954 45.2354-91.0172 72.7506 44.8757-9.1901 109.0293-21.7959 114.7974-19.9559 12.9927 4.1442 13.5193 33.7032 13.7586 41.5838.2422 7.8819 1.5221 37.4165-11.192 42.3473-5.6471 2.1894-70.4541-6.4765-115.8049-12.9127 38.2323 25.2323 92.5081 61.6783 95.2871 67.0605 6.2581 12.1175-14.2742 33.3877-19.6776 39.133-5.4027 5.7432-25.3815 27.5341-37.8563 22.0279-5.5396-2.4434-45.2361-54.3961-72.7534-91.0143 9.1901 44.8757 21.7952 109.0287 19.9551 114.7953-4.1434 12.9934-33.7026 13.5157-41.5852 13.7586-7.8799.24-37.4165 1.5221-42.3431-11.1936-2.1887-5.6464 6.4779-70.4541 12.9133-115.8071-25.2323 38.2323-61.6824 92.5124-67.0639 95.2908-12.1169 6.256-33.3891-14.2728-39.1337-19.6754-5.7432-5.4027-27.5313-25.383-22.0251-37.8578 2.4434-5.5396 54.394-45.2339 91.0136-72.7526-44.8764 9.1908-109.0266 21.7944-114.7967 19.9566-12.9934-4.1434-13.5171-33.7025-13.7586-41.5852-.2407-7.8806-1.5221-37.4165 11.1963-42.346 5.6443-2.1879 70.4498 6.4752 115.8 12.9121-38.233-25.2316-92.5081-61.6783-95.2865-67.0612-6.256-12.1169 14.2748-33.3913 19.6768-39.1337 5.4006-5.7438 25.3794-27.5333 37.8584-22.0272z" />
          </g>
        </svg>
      </div>
      <div class="cross"></div>
      <div class="video-one"></div>
      <div class="wrap embed-youtube ">
        <div class="video embed-youtube  " data-id="djV11Xbc914">
        </div>
        <button class="playa cover playgreen  embed-youtube-play" type="button" aria-label="Open"></button>
      </div>
    </div>
    <button class="exit" type="button" aria-label="Open"></button>
  </div>
</div>

I can do this:

<div class="curtain1 remove">

function removePlayerHandler(evt) {
    const el = evt.target;
    const container = el.closest(".remove");
    const wrapper = container.querySelector(".wrap");
    if (wrapper.player) {
      return removePlayer(wrapper);
    }
  }