Cp Hero Video Edit 

<header class="hero-video" data-module="heroVideo">
    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
        <img class="image__lowres js-image-lazyload" data-object-fit data-src="" alt="">
        <picture class="image__container">
            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="">
        </picture>
    </figure>
    <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"></h1>
                <p class="hero-video__lead"></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>
                            <div class="video " data-module="video" data-autoplay="" data-hide-controls="" data-loop="" data-muted="">
                                <template class="js-small-video-template">
                                    <div class="js-video-container video__container">
                                        <video controls playsinline class="video__player js-video-player">
                                        </video>
                                    </div>
                                </template>
                                <template class="js-medium-video-template">
                                    <div class="js-video-container video__container">
                                        <video controls playsinline class="video__player js-video-player">
                                        </video>
                                    </div>
                                </template>
                                <div class="js-video-container video__container"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
 
{{{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}}}
 
/* No context defined for this component. */

There are no notes for this item.