html – Tela preta no loop do EMBED do youtube

Question:

I put a background video on the login screen of my page but when the video comes to an end it goes black for 3 seconds until the video restarts how do I make it do this 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:

That "black screen" you refer to is the delay when the video ends and restarts. By normal means 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 an idea of ​​continuity and avoiding the black screen.

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

If you think the black screen is a nuisance and you have no problem with a setInterval running in the background , follow 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);
}
Scroll to Top
AllEscort