<header class="heropanel--video" data-vide-bg="mp4: https://www.gordonmac.com/wp-content/uploads/storm-1.mp4, poster: https://www.gordonmac.com/wp-content/uploads/storm-1.png" data-vide-options="posterType: png, loop: false, muted: true, position: 50% 50%">
<div class="heropanel__content">
<h1><a href="/" rel="home">Title</a></h1>
<p>Subtitle</p>
</div>
</header>.heropanel--video {
font-family:sans-serif;
min-height:500px;
}
@keyframes gm-slidein {
from {
-webkit-transform:translate3d(0,-100%,0);
opacity:0;
transform:translate3d(0,-100%,0);
}
to {
-webkit-transform:none;
opacity:1;
transform:none;
}
}
.heropanel__content {
-moz-animation:gm-slidein 3s 1;
-ms-animation:gm-slidein 3s 1;
-o-animation:gm-slidein 3s 1;
-webkit-animation:gm-slidein 3s 1;
animation:gm-slidein 3s 1;
border-bottom:1px solid #FFF;
margin:0 auto;
max-width:50%;
padding:4em 0 2em;
text-align:center;
}
.heropanel__content h1 {
margin:0 0 .5em;
text-transform:uppercase;
}
.heropanel__content h1 a {
color:#FFF;
text-decoration:none;
}
.heropanel__content p {
color:#fff;
margin:0;
text-transform:uppercase;
}
External CSS
This Pen doesn't use any external CSS resources.