CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
erics15
erics15

Reputation: 627

video background is displaying over content on webpage

I am using twitter bootstrap to build a site and I've implemented a video background. However, the video seems to just be in front of the content on the page (as well as the navigation). I tried z-index with no success. It should be easy but I can't figure out what's going on. The code for the HTML and CSS is below.

<body class="background home">
   <video autoplay id="video-background" >

   <source src="./video/beach.mp4" type="video/mp4" />

    <div class="container">
      <div class="header clearfix">
        <nav>
          <ul class="nav nav-pills pull-left">
            <li role="presentation" class="active"><a href="index.html">home</a></li>
            <li role="presentation"><a href="artists.html">artists</a></li>
            <li role="presentation"><a href="#">releases</a></li>
            <li role="presentation"><a href="#">contact</a></li>
          </ul>
        </nav>
        <h3 class="text-muted"></h3>
      </div>

      <div class="jumbotron">
        <h1><img class="logo img-responsive" src="./images/elements-logo-bw-small.png" align="center"></h1>
        <p class="lead">3Bridge Records was founded by Greg Cuoco and Eric Shans as a subdivision of 3Bridge Records to focus on the downtempo and ambient sides of electronic music. Our first releases can be found on all retail outlets. See below.</p>

     </div>



      <footer class="footer">

      </footer>

    </div> <!-- /container -->
   </video>
  </body>  

/*CSS*/
video {
  min-width:100%
  min-height:100%;
  height:auto;
  width:auto;
  background:url('../video/beach.mp4') no-repeat;
  background-size:cover;
  z-index: -100;
  position: fixed;
}

.background.home {
   background:url('../images/background-1.jpg');
   background-size: fixed;
   background-repeat: repeat;
}

.background.artists {
   background:url('../images/background-3.jpg');
   background-size: cover;
   background-repeat: repeat;
}

.jumbotron {
   background:none;
}

.jumbotron .logo {
  margin:-50px auto 0 auto;
}

.jumbotron p {
  color:#fff;
  font-size:16px;
  font-family: 'Montserrat', sans-serif;
}

.jumbotron .item {
  margin:20px 0 0 30px;
}

.header.clearfix {
    background: rgba(2, 0, 0, 0.2);
}

.nav > li >a {
  color:#fff;
  font-size:14px;
  font-family: 'Montserrat', sans-serif;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover {
   color:#fff;
}

.nav-pills > li a:hover {
   color:#000;
}

.row.marketing {
   color:#fff;
}

Upvotes: 0

Views: 62

Answers (1)

Zorak
Zorak

Reputation: 709

simply said, you cannot insert any content into <video> tag, except the needed <source> tag.

Here I have small sample for you:

.content{position:absolute; top:10%; left:10%; width:80%; height:80%; background:rgba(255,0,0,0.5);}
.menu{position:absolute; top:10%; left:10%; width:80%; height:30px; background:green;}
#video{width:200%; height:200%; position:absolute; top:-50%; left:-50%;}
body{width:100%; height:100%; overflow:hidden;}
<video id="video" loop="" autoplay="" muted="">
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
<div class="content">
<div class="menu">

</div>
</div>

Upvotes: 1

Related Questions