我正在使用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>
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;
}
}