YouTube Facade with YouTube API

youtube-facade.js

const facade = document.querySelector(".yt-facade");

window.onload = (event) => {
  const tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";
  const firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  facade.addEventListener("mouseover", replaceFacade);
};

function replaceFacade() {
  let newPlayer = document.createElement("div");
  newPlayer.id = "player";
  newPlayer.style.width = "100%";
  newPlayer.style.height = "100%";
  newPlayer.style.aspectRatio = "16/9";

  let player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player(newPlayer, {
      videoId: "-dhsDrSLovk",
      playerVars: {
        playsinline: 1,
      },
    });
  }

  facade.replaceWith(newPlayer);
  onYouTubeIframeAPIReady();
}