JSFiddle - React, Tailwind, and code Playground

HTML

<div id="overlay">
 click to begin
</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7ohbr90cKDc" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

CSS

#overlay { position:absolute; background: white; text-align: center; padding-top: 50px; height: 100vh; width: 100vw}

JavaScript

overlay.onclick = e => {
  navigator.mediaSession.metadata = new MediaMetadata({});
  const aud = new Audio("https://upload.wikimedia.org/wikipedia/en/transcoded/d/dc/Strawberry_Fields_Forever_(Beatles_song_-_sample).ogg/Strawberry_Fields_Forever_(Beatles_song_-_sample).ogg.mp3");
  aud.loop = true;
  aud.volume = 0;
  aud.play(); // this requires the user already interacted with your page
  overlay.remove();
};