404 Hero: With Video 

<div class="error-hero" data-module="errorHero">
    <div class="error-hero__background">
        <div class="video" data-module="video" data-autoplay="true" data-hide-controls="true" data-loop="true" data-muted="">
            <template class="js-small-video-template">
                <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                    <video playsinline autoplay muted loop class="video__player js-video-player">
                    </video>
                </div>
            </template>
            <template class="js-medium-video-template">
                <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                    <video playsinline autoplay muted loop class="video__player js-video-player">
                        <source src="https://media.istockphoto.com/videos/aerial-of-a-lonely-beach-at-the-coastline-of-ireland-county-donegal-video-id636724278" type="video/mp4" />
                    </video>
                </div>
            </template>
            <div class="js-video-container video__container"></div>
        </div>
    </div>
    <div class="error-hero__inner">
        <div class="grid-container">
            <div class="error-hero__content grid-x grid-padding-x">
                <div class="cell medium-8 medium-offset-2">
                    <p class="error-hero__eyebrow">Page not found (404 error)</p>
                    <h1 class="error-hero__title">The headline copy</h1>
                    <p class="error-hero__subtitle">Lorem ipsum sit amet, consectetur adipiscing elit. Mauris malesuada fermentum sagittis. Donec blandit ornare libero. Sed tempor vel enim ut efficitur.</p>
                    <a href="#" class="button-p1 button-p1--with-icon  " role="button">Cta</a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="error-hero" data-module="errorHero">
    <div class="error-hero__background">
        {{#if fullVideo}}
            {{> @cp-medium-video isYouTube=fullVideo.isYouTube isYouku=fullVideo.isYouku video=fullVideo.video autoplay=true hideControls=true loop=true }}
        {{else}}
        {{> @cp-medium-image backgroundResponsiveImage}}
        {{/if}}
    </div>
    <div class="error-hero__inner">
        <div class="grid-container">
            <div class="error-hero__content grid-x grid-padding-x">
                <div class="cell medium-8 medium-offset-2">
                    {{#if eyebrow}}
                        <p class="error-hero__eyebrow">{{eyebrow}}</p>
                    {{/if}}
                    <h1 class="error-hero__title">{{title}}</h1>
                    {{#if subtitle}}
                        <p class="error-hero__subtitle">{{subtitle}}</p>
                    {{/if}}
                    {{> @cp-button-primary target=button.target url=button.url text=button.text modifier="with-icon" }}
                </div>
            </div>
        </div>
    </div>
</div>
 
{
  "eyebrow": "Page not found (404 error)",
  "title": "The headline copy",
  "subtitle": "Lorem ipsum sit amet, consectetur adipiscing elit. Mauris malesuada fermentum sagittis. Donec blandit ornare libero. Sed tempor vel enim ut efficitur.",
  "backgroundResponsiveImage": null,
  "button": {
    "url": "#",
    "text": "Cta"
  },
  "fullVideo": {
    "isYouTube": false,
    "video": {
      "videoUrls": [
        {
          "type": "video/mp4",
          "url": "https://media.istockphoto.com/videos/aerial-of-a-lonely-beach-at-the-coastline-of-ireland-county-donegal-video-id636724278"
        }
      ],
      "posterUrl": "https://via.placeholder.com/1600x900.png"
    }
  }
}

There are no notes for this item.