视频背景启用时未显示videoBG文本

Question

我正在研究wordpress主题，我遇到了一个似乎无法修复的问题。我正在使用syd lawrences背景视频 - https://github.com/sydlawrence/jquery.videoBG来应用视频背景，但我在同一个div中有一些文本需要显示文本，但不知何故，文本没有显示出来。我的网站在这里 - http://digitalmarketingcardiff.com/copperhead/

视频div有一个h1标题和描述没有显示，我哪里错了？请帮忙。我已经尝试将z-index应用于文本，但仍然失败：（

谢谢你们。 ：）

我的标记是 - <div id="home-video"> <h1><span class="red">Ola,</span> im black dahlia!</h1> <span class="home-text">This is a....blah blah.</span> <p class="home-text"><a href="#work" class="button">Our Work</a></p> <div class="home-icon"> <a href="#work"><i class="icon-cog icon-spin"></i></a> </div>
</div>

在我的页脚中，包含在document.ready中的javascript是

var isTouch = Modernizr.touch;
if(!isTouch){jQuery('#home-video').videoBG({
mp4:'http://localhost/copperhead/wp-content/uploads/2013/10/cameraLens.mp4',
ogv:'http://localhost/copperhead/wp-content/uploads/2013/10/cameraLens.ogg',
webm:'http://localhost/copperhead/wp-content/uploads/2013/10/cameraLens.webm',
poster:'http://localhost/copperhead/wp-content/uploads/2013/10/78703.jpg',
zIndex:-30,
fullscreen: true
});
}

Answer 1

感谢Mateusz，我挖了一下，插件实际上克隆了div，这就是为什么有2个具有相同ID的div。在任何情况下删除对齐中心，帮助我解决问题。我也删除了溢出隐藏，发现文本在3000像素宽的div中间！对于其他人发现这个问题，对于videoBG，你必须指定一个宽度，否则该元素将创建一个巨大的宽度div。此外，z-index应为0，任何负数，文本元素不可点击。我的演示已经更新，可以正常工作。