Robię stronę internetową za pomocą WordPressa. Dołączyłem kod HTML do odtwarzania 3 filmów w pętli u góry strony. Początkowo wszystkie filmy są odtwarzane po kolei bez żadnych problemów. Ale podczas drugiej iteracji za każdym razem, gdy kończy się odtwarzanie filmu i ładuje się następny, zawartość pod filmem miga. Nie cała strona, ale tylko górna część treści. Wygląda na to, że treść zostaje przesunięta na ułamek sekundy. Może to kwestia wzrostu.

HTML:

<div>
    <div class="splash">
      <div class="playreel-padding">
        <div class="playreel"><a class="vp-a" href=" src="wp-content/uploads/reel/playreel.png" /></a></div>
      </div>
    <div id="splash-img" class="splash-img"><img id="splash-imgchild" src="wp-content/uploads/reel/airbnb_website.jpg" /></div>
      <video id="splash-video" class="video-playing" preload="auto" muted> 
      </video>
    </div>
    <div class="container-banner-group2">
      <div class="decocenter2"><img src="wp-content/uploads/2018/05/Ribbon.png" /></div>
    </div>
  <div id="vidgallery">

    [smart-grid row_height="250" fixed_height="true" margins="0" font_type="google" google_font="Fredericka the Great"]

    

    [/smart-grid]

  </div>
</div>

CSS:

.container-banner-group2{
    float: left;
    /*height: 615px;*/
    width: 100%;
    position: absolute;
    z-index: 950;
    pointer-events: none;

}

.decocenter2{
    width: 100%;
    max-width: 690px;
    vertical-align :top;
    -ms-transform: translate(0px,-80px); /* IE 9 */
    -webkit-transform: translate(0px,-80px); /* Safari */
    transform: translate(0px,-80px);
    margin:0 auto;  
    position: relative;
}
.decocenter2 img{
    width: 100%;
}
.video-padding-img{
    width: 100%;
    visibility: none;
}

.video-padding {
    z-index: -10;
    visibility: none;
}

.playreel-padding{
    position: absolute;
    width: 100%;

    height: 100%;

}

.playreel{
    position: relative;
    width: 234px;
    margin:0 auto;
    z-index: 2000;
    top: 200px;

}
.splash img{
    width: 100%;
}
.splash-img{
    position: absolute;
    width:100%;
    object-fit: cover;
}
#splash-imgchild{
    position: absolute;
    width:100%;
    z-index: 1;
    object-fit: cover;
}
.video-playing{
    position: relative;
    width:100%;
    object-fit: cover;
    z-index:2;
}
.video-mask{
    background-image: url("wp-content/uploads/reel/mask.png");
    z-index: 5;
    position: relative;
    object-fit: cover;
}

@media (max-width: 600px) {
    .decocenter2{
    transform: translate(0px,-40px);
    }
}
@media (max-width: 1440px) {
    .playreel{
    top: 100px;
        
    }

}
@media (max-width: 1100px) {
    .playreel{
        top: 40px;  
    }

}
@media (max-width: 800px) {
    .playreel{
        top: 40px;
        width: 134px;   
    }

}
@media (max-width: 500px) {
    .playreel{
        top: 15px;
        width: 134px;   
    }

    #splash-video{
           visibility: hidden;
       
    }
    
}