Databases
StackOverflow2013
Postsdbo
POvideoBG text not showing when video background is enabled
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POvideoBG text not showing when video background is enabled
    text
    copied!<p>I'm working on a wordpress theme, and I'm having an issue I can't seem to fix. I'm using syd lawrences background video - <a href="https://github.com/sydlawrence/jquery.videoBG" rel="nofollow">https://github.com/sydlawrence/jquery.videoBG</a> to apply a video background, but I have some text in the same div and need the text to show, but somehow, the text is not showing up. My website is here - <a href="http://digitalmarketingcardiff.com/copperhead/" rel="nofollow">http://digitalmarketingcardiff.com/copperhead/</a></p> <p>the video div has a h1 header and description that are not showing up, where am I going wrong? Please help. I've tried applying z-indexes to the text, but still failing :(</p> <p>Thanks guys. : )</p> <p>my markup is - <code>&lt;div id="home-video"&gt; &lt;h1&gt;&lt;span class="red"&gt;Ola,&lt;/span&gt; im black dahlia!&lt;/h1&gt; &lt;span class="home-text"&gt;This is a....blah blah.&lt;/span&gt; &lt;p class="home-text"&gt;&lt;a href="#work" class="button"&gt;Our Work&lt;/a&gt;&lt;/p&gt; &lt;div class="home-icon"&gt; &lt;a href="#work"&gt;&lt;i class="icon-cog icon-spin"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt;<br> &lt;/div&gt;</code></p> <p>and in my footer the javascript wrapped in document.ready is </p> <p><code>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> }</code></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload