来自 CSS 的视频背景覆盖了 Wordpress 上的页脚

Question

我的公司正在使用 Wordpress；我找到了一些有用的代码来将视频作为背景，我们很高兴它在我们的网络浏览器上加载的速度有多快。不幸的是，此背景显示在页脚的顶部，因此页脚不再可见。我以两种方式插入了 html 代码：1. 在 Visual Composer 中使用了 "raw html" 字段，2. 通过 Wordpress 文本编辑器插入了 html 代码。正如我提到的，代码运行良好，但它覆盖了页脚。这是页面的位置：http://gathereducation.com/homepage-html-5-video/。

这里是 html、CSS 和 JS:

HTML:

<video autoplay loop poster="/wp-content/uploads/2015/03/student_pov.jpg" id="bgvid">
<source src="/wp-content/uploads/2015/03/HomepageBannerNewClass.webm" type="video/webm">
<source src="/wp-content/uploads/2015/03/HomepageBannerNewClass.mp4" type="video/mp4">
</video>

CSS:

video { display: block; }

video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%; min-height: 100%;
width: auto; height: auto; 
z-index: -100;
background: url(/wp-content/uploads/2015/02/student_pov.jpg) no-repeat;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
}

@media screen and (max-device-width: 800px) {
.content { background: url(http://gathereducation.info/wp-content/uploads/2015/02/student_pov.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
}

RAW JS:

<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->

有谁知道如何解决这个问题？我想我了解导致问题的原因，但我无法找出将页脚显示在背景下方的最佳方式 - 而不是在背景下方。

谢谢！

Answer 1

只需在页脚中添加一个 z-index。

footer {
  z-index: 100;
}

在 Chrome 中表现出色。

来自 CSS 的视频背景覆盖了 Wordpress 上的页脚

Video background via CSS covers footer on Wordpress

html

css

wordpress

background

html5-video