Hero Hub: Video 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/hero.css?cb=">

<div class="hero hero--hub hero--spacer-large hero--with-image " data-module="hero">

    <div class="hero__image  ">
        <picture>
            <source media="(max-width: 840px)" type="" srcset="https://dummyimage.com/400x225/f0f0f0/545454.png" />
            <source media="(min-width: 841px)" type="" srcset="https://dummyimage.com/800x450/f0f0f0/545454.png" />
            <img src="https://dummyimage.com/800x450/f0f0f0/545454.png" alt="Image alt text">
        </picture>
    </div>
    <div class="hero__video">
        <video data-module="video" class="video-player__video" playsinline preload="metadata" poster="https://dummyimage.com/800x450/f0f0f0/545454.png" loop autoplay muted data-poster-url="https://dummyimage.com/800x450/f0f0f0/545454.png">
            <source src="/media/test.mp4" type="video/mp4">
        </video>
    </div>

    <div class="hero__content">
        <div class="hero__content-inner">
            <h1 class="hero__title">Hero hub</h1>
            <h2 class="hero__subtitle">This hero appears on the hub page type</h2>
        </div>
    </div>

</div>
 
{{> @hero modifier="hero--hub" }}
 
{
  "theme": "default",
  "firstInstance": true,
  "title": "Hero hub",
  "subtitle": "This hero appears on the hub page type",
  "image": {
    "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
    "fallbackImageUrl": "https://dummyimage.com/800x450/f0f0f0/545454.png",
    "sources": [
      {
        "types": "image/jpeg",
        "mobileImageUrl": "https://dummyimage.com/400x225/f0f0f0/545454.png",
        "desktopImageUrl": "https://dummyimage.com/800x450/f0f0f0/545454.png"
      }
    ],
    "altText": "Image alt text"
  },
  "spacer": "large",
  "video": {
    "firstInstance": true,
    "theme": "default",
    "autoplay": true,
    "showControls": false,
    "loop": true,
    "posterUrl": "https://dummyimage.com/800x450/f0f0f0/545454.png",
    "sources": [
      {
        "type": "video/mp4",
        "url": "/media/test.mp4"
      }
    ]
  }
}

No notes defined.