Flexbox 100% height

HTML

<!doctype html>

<html class="no-js" lang="en" style="margin-top: 0 !important;">
	
<head itemscope itemtype="http://schema.org/WebSite">
	
<meta charset="utf-8" />

<title itemprop="name">Test</title>

</head>

<body>

<div id="wrapper">

	<section id="video">
		<div id="text">
			<h1>This is my main headline</h1>
		</div>
	</section>

</div>

</body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
}

#wrapper {
  width: 100%;
  height: 100%;
}

#video {
  display: flex;

  height: 100vh;
  justify-content: center;
  align-items: center;
  background: orange;
}

#text {
  z-index: 1;
  width: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
}