Я создаю веб-сайт Angular с фоном видео HTML5. После загрузки контент ng-view будет отображаться в течение полсекунды, а затем исчезнет, после чего будут отображены только фоновое изображение и панель навигации. Что я делаю неправильно? Ниже мой код:
Страница указателя:
<!DOCTYPE html>
<html ng-app="mmpnApp">
<head>
<title>Mogul Minds Podcast Network</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
<video autoplay muted loop id="myVideo">
<source src="https://staging.coverr.co/s3/mp4/South_Carolina_City.mp4" type="video/mp4">
</video>
</head>
<body ng-controller="mainController">
<nav id="navbar" class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#"><img height="100px" src="/img/mmpn.jpeg"></a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Staff</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Podcasts
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Real Talk Chicago</a>
<a class="dropdown-item" href="#">Sool Radio</a>
<a class="dropdown-item" href="#">Edwin's Hardcore History</a>
</div>
</li>
</ul>
</nav>
<div id="main">
<div ng-view></div>
</div>
</body>
</html>
Стайлинг:
body {
font-family: 'Roboto Slab', serif; }
#myvideo {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden
}
.firstbanner {
margin-top: 50px;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
#navbar {
background-color: #000;
min-width: 100%
}
Любая помощь будет приветствоваться. Большое спасибо заранее!