html – Tela preta no loop do EMBED do youtube


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?


  <div class="video-background">
    <div class="video-foreground">
      src="" frameborder="0" allowfullscreen>


.video-background {
    background: #000;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -99;
  .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; }


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(){
      var vclone = document.createElement("iframe");
      vclone.src = document.querySelectorAll("iframe")[0].getAttribute("src");
      var container = document.querySelector(".video-foreground");

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

   }, 27000);
Scroll to Top