<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.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://www.gordonmac.com/wp-content/themes/2016/vendor/vide/jquery.vide.min.js