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