0

I have a webpage that uses tubular.js script to show youtube video as a site background. There's a sentence on tubular page:

First, it assumes you have a single wrapper element under the body tag that envelops all of your website content. It promotes that wrapper to z-index: 99 and position: relative.

So following that, I wrote a simple html/css code:

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}
#logocontainer{
    position: absolute;
    top: 20%;
    margin-top: -35px;/* half of #content height*/
    left: 0;
    width: 100%;
    text-align:center;
}
#logo {
    margin-left: auto;
    margin-right: auto;
    height: 75px;
}


</style>
<body>
<div id="wrapper" class="clearfix">
    <div id="logocontainer">
        <div id="logo">
            <img src="img/logo.png"/>
        </div>
    </div>


</div> <!--wrapper-->   
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.tubular.1.0.js"></script> 
<script type="text/javascript">
            $(function() {
                var options = {
                    videoId : '9JXVUP1hyxA',
                    start : 1
                };
                $('body').tubular(options);
            });
        </script>
</body>
</html>

but now, when I run it - I see only youtube video without my logo on top... I know the logo is there, because when I comment out the youtube script I can see it, however I don't see it when the video is present. I tried to add z-index:99 to #logo but that didn't do any magic... Can you help me with that?

EDIT:

As A. Wolff suggested below, I added to my css:

#wrapper{
    z-index:99;
    position: relative;
}

still though - no good results, video is still on top..

John Slegers
  • 45,213
  • 22
  • 199
  • 169
randomuser1
  • 2,733
  • 6
  • 32
  • 68

2 Answers2

2

I see in their own Tubular they use this little script...

$('document').ready(function() {
var options = { videoId: 'ab0TSkLe-E0', start: 3 };
$('#wrapper').tubular(options);
// f-UGhWj1xww cool sepia hd
// 49SKbS7Xwf4 beautiful barn sepia

});

Just adding this keeps everything on top. Use the code in this Fiddle as a sample.

enter image description here

AngularJR
  • 2,752
  • 2
  • 16
  • 19
1

Your must use z-index with position: relative/absolute. Also your z-index in video must be less than in your blocks.

video {
    position: absolute;
    z-index: 1;
}

div {
    position: relative;
    z-index: 2;
}
AleshaOleg
  • 2,171
  • 1
  • 15
  • 29