【发布时间】：2026-02-07 10:30:01
【问题描述】：
我正在开发一个 wordpress 主题，但我遇到了一个似乎无法解决的问题。我正在使用 syd lawrences 背景视频 - https://github.com/sydlawrence/jquery.videoBG 应用视频背景，但我在同一个 div 中有一些文本，需要显示文本，但不知何故，文本没有显示。我的网站在这里 - http://digitalmarketingcardiff.com/copperhead/
视频 div 有一个未显示的 h1 标题和描述，我哪里出错了？请帮忙。我已经尝试将 z-indexes 应用于文本，但仍然失败:(
谢谢各位。 :)
我的标记是 -
<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
});
}
【问题讨论】：
-
你有两个元素 id="home-video" 重命名一个并检查它是否有效
-
嗨 Mateusz，谢谢，但是文档中的第二个家庭视频是由 videobg 插件生成的，我上面的标记只有一个家庭视频 div。如果您在完成后检查 dom，那么我可以看到 2 个家庭视频 div，但 videobg 正在生成其中一个。
-
在 DOM 中，您只能拥有一个带有某个 id 的元素（不管是谁创建的）。如果视频插件调用 id='home-vide' 的元素，它将接收具有此 id 的第一个元素。这很奇怪，因为如果我检查 DOM 并关闭 text-align: center in #home-video 所有文本都会出现，所以我认为问题出在 id 上。
标签： jquery css html jquery-plugins html5-video