Graham Hudgins - this code is what we're trying to get going.
I think the <section> tags are also a problem, but those are easy to replace with DIVs.
The Video tag, though seems to be totally ignored as soon as you exit editing the text card.
<style>
body {
background: #CCC;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif; }nav {
background: #333;
color: #FFF;
font-weight: bold;
height: 50px;
padding: 20px;
text-transform: uppercase;
text-align: center; }.masthead {
height: 800px;
position: relative;
margin: 0;
padding: 0; }.fullscreen-bg {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
top: 0;
left: 0; }.fullscreen-bg__video {
background-position: center;
object-fit: cover;
object-position: 50% 50%;
height: 100%;
width: 100%; }.overlay {
color: #FFF;
margin: auto;
position: absolute;
padding: 50px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: rgba(0, 0, 0, 0.5); }
.overlay h1 {
font-size: 48px;
margin: 0;
padding: 0; }
.overlay p {
width: 90%;
margin: auto;
padding: 0 0 30px 0; }
.overlay button {
background: #00a8e7;
color: #FFF;
font-size: 14px;
font-weight: bold;
border: 0;
padding: 15px 40px; }.content {
padding: 10px; }@media (max-width: 767px) {
.fullscreen-bg {
background: url("img/coast.jpg") center center/cover no-repeat; }
.fullscreen-bg__video {
display: none; } }</style>
</head>
<body>
<nav>
<p>navigation</p>
</nav>
<section class="masthead">
<div class="fullscreen-bg">
<video loop muted autoplay poster="http://www.stone-env.net/permian/coast.jpg" class="fullscreen-bg__video">
<source src="http://www.stone-env.net/permian/coast.webm" type="video/webm">
<source src="http://www.stone-env.net/permian/coast.mp4" type="video/mp4">
</video>
</div>
<div class="overlay">
<h1>TITLE</h1>
<p>Cool Science Title</p>
<button>Explore the data</button>
</div>
</section>
<section class="content">
<h2>This is a sub heading</h2>
<p>This is a paragraph.</p>
</section>
