消除视频加载后的页面跳转

Question

在此站点上，一旦视频加载完毕，页面的顶部就会向下跳转。该视频托管在别处。

我认为这是因为视频的高度在完全加载后才知道，然后包装器 div 展开以适合。

我该如何解决这个问题？

Answer 1

你真的有两个选择：

其中之一：向您的网站添加一个加载屏幕，该屏幕会在所有内容（包括视频）加载完毕后消失 ()

或者，最好为您的视频容器设置一个高度。由于您使用的是 16:9，并且视频元素设置为 position: absolute，因此您实际上可以删除高度并改用 padding-bottom。这就是响应式视频容器通常的完成方式。

#botr_bw5Ao14B_sU6GI2rt_div {
    height: 0 !important;
    padding-bottom: 56.25%;
}

尝试将上述 CSS 添加到您的 Customizer > Additional CSS 部分（或您自定义 CSS 的任何地方）。我必须添加 !important 来覆盖视频播放器 JavaScript.

应用的内联 height 样式

Eliminate page jump after video loads