我正在使用WordPress创建一个网站。我在页面顶部包含了一个HTML代码，可以在一个循环中播放3个视频。最初，所有视频按顺序播放，没有任何问题。但在第二次迭代中，每次视频播放完毕并加载下一个视频时，视频下面的内容都会闪烁。不是整个页面，而是内容的顶部。内容似乎在几分之一秒内被替换。这可能是一个身高问题。

HTML：

<div>
    <div class="splash">
      <div class="playreel-padding">
        <div class="playreel"><a class="vp-a" href="https://vimeo.com/181701051"><img 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"]

    [gallery ids="3499,3479,3504,3514,3486,3481,3494,3485,3487,3490,3488,3507,3506,3482,3498,3492,3500,3503,3491,3496,3497" orderby="rand"]

    [/smart-grid]

  </div>
</div>

.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;

    }

}