When I place a div after the video, the div appears on top of the video instead of after it. Additionally, when I change min-width: 100% to width: 100%, the content appears before the video when I resize the browser.
body{
font-family: 'Mina', sans-serif;
}
.navbar{
margin-bottom: 0px;
}
.navbar-brand{
padding: 0px;
}
.vid video{
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
.content {
position: fixed;
bottom: 0;
color: #ffffff;
width: 100%;
padding: 0px;
top: 10%;
text-align: center;
}<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link href="https://fonts.googleapis.com/css?family=Mina" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top container-fluid">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo1.png"></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Countries</a></li>
<li><a href="#">RECOMMENDED</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid vid">
<video autoplay="" loop="" class="fillWidth" poster="" id="video-background">
<source src="video/24.mp4" type="video/mp4">
</video>
<video autoplay="" loop="" class="fillWidth" poster="" id="video-background">
<source src="video/24.webm" type="video/mp4">
</video>
<div class="content">
<h1>Discover the Best Holiday Homes to stay</h1>
</div>
</div>
<div class="container">
<div class="row aft-vid">
<div class="col-lg-12">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src=""></script>
</body>
</html>