I have a video that I am trying to use as a background and want it to be able to resize according to the browser size as well. Currently, the video is zoomed far in and therefore, only a portion of the video is shown.
I would like there to be no whitespace between any of the divs. All the other methods I have tried have led to this...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
margin: 0;
}
.container-fluid .header {
position: relative;
}
.video-container {
z-index: -100;
overflow: hidden;
position: relative;
top: 0;
left: 0;
max-width: 100vw;
width: 100%;
max-height: 100vh;
height: 100%;
}
#video-bg {
margin: 0 auto;
height:auto;
width:auto;
display: block;
}
.block {
width: 100%;
height: 100vh;
}
#block1 {
background: black;
}
#block2 {
background: yellow;
}
#block3 {
background: red;
}
/*.carousel-caption {
left: 5%;
text-align: left;
max-width: 500px;
right: auto;
padding:5px;
}
.carousel-inner {
width: auto;
}
.carousel-inner > .carousel-item > img {
height:100vh;
}*/
</style>
</head>
<body>
<div class="container-fluid header">
<div class="header">
<div class="video-container">
<video autoplay muted id="video-bg">
<source src="https://static.videezy.com/system/resources/previews/000/003/951/original/downtownla.mp4" type="video/mp4"/>
</video>
</div>
</div>
</div>
<div id="block1" class="block">
</div>
<div id="block2" class="block">
</div>
<div id="block3" class="block">
</div>
</html>
Aucun commentaire:
Enregistrer un commentaire