How to initialize YouTube's API player?

I'm trying to implement a background video with custom controls (rewind 5 seconds and reduce playback speed). I want to use YouTube links as video sources and I don't want any YouTube info to show up nor the default controls.

I've tried using iframe and video tag, but the iframe can't change the speed nor rewind (from what I've gathered) and the video tag can't use YT links.

By doing this I get error code M2sXarBf-_A4NpgU from youtube (basically telling me the video can't load but it doesn't specify why and I don't get any errors on console).

let player

function onYouTubeIframeAPIReady() {
  console.log("api loaded")
  player = new YT.Player("myvid", {
    videoID: "QPjHCAHfjoU",
    host: 'https://www.youtube.com',
    playerVars: {
      autoplay: 1,
      muted: 1,
      controls: 0,
      origin: 'http://127.0.0.1:3000/client/main.html'
    }
  })
}

#myvid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

.video-background {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -99;
}

.video-foreground,
.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
}

<div class="video-background">
  <div class="video-foreground">
    <div id="myvid"></div>
  </div>
</div>

but the iframe can't change the speed nor rewind I believe you can use iframe to achieve this, you might have missed adding functions to do the same. I believe the code you provided was that much only.

Create a custom video player and add JavaScript functions for rewind and speed control. For. eg HTML

<div class="video-background">
    <div class="video-foreground">
        <div id="myvid"></div>
    </div>
    <div class="custom-controls">
        <button id="rewindButton">Rewind 5s</button>
        <button id="reduceSpeedButton">Reduce Speed</button>
    </div>
</div>

JS

let player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player("myvid", {
        videoId: "QPjHCAHfjoU",
        playerVars: {
            autoplay: 1,
            mute: 1,
            controls: 0,
        },
        events: {
            onReady: onPlayerReady,
        },
    });
}

function onPlayerReady(event) {
    // Define custom control actions
    document.getElementById("rewindButton").addEventListener("click", rewindVideo);
    document.getElementById("reduceSpeedButton").addEventListener("click", reduceSpeed);
}

function rewindVideo() {
    const currentTime = player.getCurrentTime();
    player.seekTo(currentTime - 5, true);
}

function reduceSpeed() {
    const currentPlaybackRate = player.getPlaybackRate();
    player.setPlaybackRate(currentPlaybackRate - 0.25); // You can adjust the speed reduction factor
}