{{{customeditframe.editframeStart}}}
<header class="hero-video" data-module="heroVideo">
    {{#if background.video}}
    <div class="hero-video__cinegraph-video-container" data-video="{{jsonSerializer background.video}}">
        <video class="hero-video__cinegraph-video" autoplay loop muted preload playsinline>
        </video>
    </div>
    {{/if}}
    {{> @cp-medium-image background.responsiveImage}}
    <div class="hero-video__content grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell medium-12 large-5 hero-video__open-modal-button-container">
                <a href="#" class="hero-video__open-modal-button"></a>
            </div>
            <div class="cell medium-offset-4 medium-8 large-offset-0 large-7 xlarge-offset-1 xlarge-6">
                <h1 class="hero-video__title">{{{title}}}</h1>
                <p class="hero-video__lead">{{{subtitle}}}</p>
            </div>
        </div>  
    </div>
    <div class="hero-video__sidebar">
    </div>
    <div class="hero-video__modal">
        <div class="hero-video__modal-inner">
            <div class="grid-container">
                <div class="grid-x grid-padding-x">
                    <div class="cell medium-offset-1 medium-10 vertical-align">
                        <div class="hero-video__modal-video-container">
                            <a href="#" class="hero-video__close-modal-button"></a>
                            {{> @cp-medium-video fullVideo}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
{{{customeditframe.editframeStop}}}