site/_src/_includes/hero-video.html

<header class="hero hero-video">

    {% include menu-main.html %}

    <div class="hero__content hero-video__content row">
        <hgroup>
            <svg class="logo logo--full logo--white--green" aria-labelledby="title">
                <title>Logo</title>
                <use xlink:href="/assets/img/sprite.svg#logo"></use>
            </svg>

            <h1 class="section-title">Introducing BigchainDB. A blockchain database, at scale.</h1>
        </hgroup>

        <a href="#features" class="scroll btn btn-link btn-sm">Learn More <svg class="icon">
            <use xlink:href="/assets/img/sprite.svg#icon-caret"></use>
        </svg></a>
    </div>

    <div class="hero-video__background">
        <video class="hero-video__video" preload="none" loop>
            <source src="/assets/videos/{{ page.hero_video_name }}.mp4" type="video/mp4">
            <source src="/assets/videos/{{ page.hero_video_name }}.webm" type="video/webm">
        </video>
        <img class="hero-video__poster" width="1920" height="1080" src="/assets/img/northern-lights-poster.jpg" />
    </div>

</header>