What's new

Web Video background website

lowpro

lowpro

Professional Abecedarian
Programmer Mythical Veteran Mr. Nice Guy
Messages
4,528
Reaction score
2,041
Points
725
Sin$
0
I've been developing a site using bootstrap, and I'm almost finished, but I can't figure out how to make a video background properly.

I have a video playing, but it covers everything else and isn't in the background.

(relevant) CSS:

Code:
header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff;
    background-image: url(../img/thumbnail.png);
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
background: url('\img\thumbnail.png') no-repeat;
  background-size: cover;
  transition: 1s opacity;
}
.stopfade {
   opacity: .5;
}

a:hover{
  background:rgba(0,0,0,0.9);
}
@media screen and (max-width: 500px) {
  div{width:70%;}
}
@media screen and (max-device-width: 800px) {
  html { background: url(\img\thumbnail.png) #000 no-repeat center center fixed; }
  #bgvid { display: none; }
}
Code:
<body>

<video autoplay="autoplay" muted="muted" poster="\img\thumbnail.png" loop="loop" id="bgvid">
                        <source src="\img\kids.mp4" type="video/mp4">
                        <source src="\img\kids.webm" type="video/webm"
</video>
....
</body>

The pictures and videos are hosted locally, so / and \ and used in different places. I had the thumbnail under everything but the video would play, now it seems the video is on top of everything because you can't see anything but the video. Any help or ideas are appreciated.
 
Top Bottom
Login
Register