I'm currently working on a WordPress theme and encountering an issue that I can't seem to resolve. I've integrated Syd Lawrence's background video plugin from https://github.com/sydlawrence/jquery.videoBG to add a video background, but the text within the same div is not displaying as intended. You can view my website at
The video div contains an h1 header and description that are failing to show up. Can anyone pinpoint where I might be making a mistake? I've attempted adjusting z-index values for the text with no success :(
Appreciate any assistance provided. Thank you! : )
The markup structure I have used is as follows -
<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><br>
</div>In the footer section, JavaScript enclosed in the document.ready function appears like this -
var isTouch = Modernizr.touch;<br>
if(!isTouch){jQuery('#home-video').videoBG({<br>
mp4:'http://localhost/copperhead/wp-content/uploads/2013/10/cameraLens.mp4',<br>
ogv:'http://localhost/copperhead/wp-content/uploads/2013/10/cameraLens.ogg',<br>
webm:'http://localhost/copperhead/wp-content/uploads/2013/10/cameraLens.webm',<br>
poster:'http://localhost/copperhead/wp-content/uploads/2013/10/78703.jpg',<br>
zIndex:-30,<br>
fullscreen: true<br>
});<br>
}