lowpro
Professional Abecedarian
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:
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.
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.