PROBLEMA COM VIDEO BACKGROUND

*** HTML *** <!DOCTYPE html>
<html>
<head>
	<title>FODA-SE</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

	<link rel="stylesheet" type="text/css" href="css/style.css">

	<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">

</head>
<body>

<div>

<div class="wrap">
<div class="content">
<h1>HI!</h1><br>
<h1>I'M</h1><br>
<h1 class="element"><span class="typed-cursor"></span></h1>

</div>
</div>
<video autoplay="autoplay" loop="loop" class="video-bg">

<source src="media/computer.mp4" type="video/mp4">

</video>
<div class="wrapper">
<button class="knowMoreBtn">Know more</button>
</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-md-3"></div>
		<div class="col-md-3"></div>
		<div class="col-md-3"></div>
		<div class="col-md-3"></div>
	</div>
</div>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="
    sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>

    <script src="typed.js"></script>
<script>
  $(function(){
      $(".element").typed({
        strings: ["GUSTAVO.", "...", "WEB DEVELOPER", "GAMER", "GEEK", "AND", "SEXY ;)"],
        typeSpeed: 95,
            showCursor: true,
            cursorChar: "|",
            backdelay: 150,
            loop: false,
            backSpeed: 95


      });
  });
</script>


</body>
</html>


*** CSS ***


*{
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html, body{
  margin: 0px;
  padding-top: 0px;
}


.video-bg{
 position: fixed;
  top: 50%; left: 50%;
  z-index: ;
  min-width: 100%;
  min-height: 65%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);

}

div h1{
	z-index: 2;
	position: relative;
	top: 100px;
	font-size: 80px;
	color: #E91E63;
  text-align: center;
  font-family: 'Droid Sans', sans-serif;
  font-weight: bold;
}

.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
    margin: 0 auto;
    position: relative;
}

@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

.knowMoreBtn{
  z-index: 3;
  height: 50px;
  width: 150px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: rgba(158, 158, 158, 0.8);
  border: 4px solid #E91E63;
  font-size: 22px;
  color: white;
  top: 600px;

}

.knowMoreBtn:focus{
  outline: none;
}