JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<body class="main-container">

<div class="centered" id="location-header">
  Seattle
</div>

<div id="clicktargetcontainer">
	<video loop muted  id="mainvideo" src="http://player.vimeo.com/external/123836285.hd.mp4?s=6ddd98cc75f1bb6fb776369a8fa372bf&profile_id=113" type="video/mp4" webkit-playsinline="webkit-playsinline"e ad-outlet="video">
	    Your browser does not support HTML5 video.
	</video>

</div>


</body>

</html>

CSS

html {
  height: 100%;
  font-family: futura-pt, sans-serif;
}

body {
  background: #222;
  color: white;
  font-family: futura-pt, sans-serif;
}



video {
  overflow: hidden;
  position: absolute;
  height: 56.25%;
  margin: auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
  transform:rotate(90deg);
  -webkit-transform:rotate(90deg);

}

.main-container {
  min-height: 100%;
  position: relative;
  /*overflow: hidden;*/
  background: #000;
}

.video-container {
  position: relative;
}

#clicktargetcontainer {
  min-height: 100%;
  /*overflow: hidden;*/
  height: 100%;
}


#clicktargetcontainer::after {
  background: linear-gradient(to top, rgba(0,0,0,0) 80%, rgba(0,0,0,.3));
  content: " ";
  display: block;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 8000;
}



#location-header {
  text-transform: uppercase;
  font-size: 30pt;
  color: white ;
  z-index: 9000;
  position: fixed;
  margin-top: 0px;
  margin-bottom: auto;
  text-align: center;
  display: block;
  width: 100%;
}