Hero with Video Background

Hero with Video Background

by Solodev CMS

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://www.gordonmac.com/wp-content/themes/2016/vendor/vide/jquery.vide.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<header class="heropanel--video" data-vide-bg="mp4: https://www.solodev.com/assets/video-bg/blog-SD.mp4,  data-vide-options="posterType: png, loop: true, muted: true, position: 50% 50%>
<div class="heropanel__content">
   <h1><a rel="home">No Static Web Pages</a></h1>
   <p>A Hero Video </p>
</div>
</header>

CSS

.heropanel--video {
    font-family: 'Open Sans', sans-serif;
    min-height:320px;
}
@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;
    background-color: rgba(0, 0, 0, 0.5);
}

.heropanel__content h1 {
    //margin:0 0 .5em;
    margin-top: 40px;
    text-transform:uppercase;
}

.heropanel__content h1 a {
    color:#FFF;
    text-decoration:none;
}

.heropanel__content p {
    color:#fff;
    margin:0;
    text-transform:uppercase;
}