Black screen in youtube EMBED loop

Question

I put a background video on the login screen of my page but when the video comes to an end it stays with the black screen for 3 seconds until restarting the video as I do for it to do it instantly ?

HTML

  <div class="video-background">
    <div class="video-foreground">
      <iframe 
      src="https://www.youtube.com/embed/ng8Wivt52K0?controls=1&showinfo=0&rel=0&autoplay=1&loop=1&playlist=ng8Wivt52K0&autohide=1" frameborder="0" allowfullscreen>
    </iframe>
    </div>
  </div>

CSS

.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: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  #vidtop-content {
    top: 0;
    color: #fff;
}
.vid-info { position: absolute; top: 0; right: 0; width: 33%; background: rgba(0,0,0,0.3); color: #fff; padding: 1rem; font-family: Avenir, Helvetica, sans-serif; }
.vid-info h1 { font-size: 2rem; font-weight: 700; margin-top: 0; line-height: 1.2; }
.vid-info a { display: block; color: #fff; text-decoration: none; background: rgba(0,0,0,0.5); transition: .6s background; border-bottom: none; margin: 1rem auto; text-align: center; }
@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}
@media all and (max-width: 600px) {
.vid-info { width: 50%; padding: .5rem; }
.vid-info h1 { margin-bottom: .2rem; }
}
@media all and (max-width: 500px) {
.vid-info .acronym { display: none; }
}

Answer 1

This "black screen" referred to is the delay when the video ends and restarts. In normal ways this cannot be avoided. However you can use a form that replaces the video when it is ending with another already started (in this case, the same video), giving idea of continuity and avoiding the black screen.

When video is in 27 seconds (out of 30), the script will inject into div a new video with z-index: -1 that will cause it to stay below the current one and start. Using setTimeout, after 3 seconds, the video that is ending will be deleted from the page and what was below will be visible.

If you find the black screen a nuisance and have no problem of a setInterval being executed in background, follows the script:

window.onload = function(){
   setInterval(function(){
      var vclone = document.createElement("iframe");
      vclone.setAttribute("style","z-index:-1;");
      vclone.setAttribute("frameborder","0");
      vclone.setAttribute("allowfullscreen","");
      vclone.src = document.querySelectorAll("iframe")[0].getAttribute("src");
      var container = document.querySelector(".video-foreground");
      container.appendChild(vclone);

      setTimeout(function(){
         document.querySelectorAll("iframe")[1].style.zIndex = "0";
         document.querySelectorAll("iframe")[0].outerHTML = "";
      }, 3000);

   }, 27000);
}