JSFiddle - React, Tailwind, and code Playground

HTML

<!-- контент -->
<div class="video">
<!--<iframe class="iframe1" src="https://www.youtube.com/embed/Uy6zBI_zLWA" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="560" height="315" frameborder="0"></iframe>-->
</div>
<!-- футер -->

CSS

.video{
  text-align: center;
  margin-top:600px;
}

JavaScript

let isset_ifr = false;
document.onscroll = function() {
  let scrolled = document.documentElement.scrollTop;
  if(scrolled > 220 && !isset_ifr){
  	let video = document.querySelector(".video");
    let ifr = document.createElement("iframe");
    ifr.classList.add('iframe1');
    ifr.src = "https://www.youtube.com/embed/Uy6zBI_zLWA";
    ifr.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
    ifr.width = 560;
    ifr.height = 315;
    video.appendChild(ifr);
    isset_ifr = true;
  }
}