Hero Standard: With Play Cinegraph 

<header class="hero-standard hero-standard--has-video" data-has-cinegraph="true" data-has-video="true" data-module="heroStandard" data-preload="true">
    <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-like" data-module="heroLike">
        <button class="hero-like__button js-module-like-button" data-card-id="1338">
            Save to my board
            <span class="like-button js-heart"><span class="like-button__wave"></span></span>
        </button>
        <div class="hero-like__card-container js-card-container">
            <div class="card-featured bg-inverted js-card-generic has-tags" data-module="card" data-card-id=1338 data-longitude="-5.95577" data-latitude="54.59623">
                <a href="#" class="card-featured__anchor js-link">
                    <div class="location-marker js-location-marker" data-module="locationMarker" data-longitude="-5.95577" data-latitude="54.59623">
                        <div class="location-marker__text">
                            <span class="location-marker__text-description js-marker-description"></span>
                            <span class="location-marker__distance js-marker-distance"></span>
                        </div>
                    </div>
                    <button class="like-button js-like-button" role="button">
                        <span class="like-button__text"></span>
                        <span class="like-button__wave"></span>
                    </button>
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="" data-force-load="true">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" alt="Alt Text">
                        </picture>
                    </figure>
                    <p class="card-featured__page-type js-page-type">Accommodation</p>
                    <div class="card-featured__overlay">
                        <time class="card-featured__read-time" datetime="">14 - 18 March</time>
                        <h2 class="card-featured__title js-title">Accom example</h2>
                        <p class="card-featured__location js-location-name">Belfast</p>
                        <div class="hashtags" data-module="hashtags">
                            <ul>
                                <li><span class="hashtags__link js-hashtag-link" data-tag-name="citybreak" role="button">#Citybreak</span></li>
                                <li><span class="hashtags__link js-hashtag-link" data-tag-name="adventure" role="button">#Adventure</span></li>
                                <li><span class="hashtags__link js-hashtag-link" data-tag-name="surfing" role="button">#Surfing</span></li>
                            </ul>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="hero-standard__cinegraph-container js-cinegraph-container" data-video="[{&quot;type&quot;:&quot;video/webm&quot;,&quot;largeUrl&quot;:&quot;https://d3fenhwk93s16g.cloudfront.net/9g3i6w/hd_mp4.webm&quot;,&quot;smallUrl&quot;:&quot;http://techslides.com/demos/sample-videos/small.webm&quot;},{&quot;type&quot;:&quot;video/mp4&quot;,&quot;largeUrl&quot;:&quot;https://d3fenhwk93s16g.cloudfront.net/9g3i6w/hd_mp4.mp4&quot;,&quot;smallUrl&quot;:&quot;http://techslides.com/demos/sample-videos/small.mp4&quot;}]">
        <video class="hero-standard__cinegraph js-cinegraph" autoplay loop muted preload playsinline></video>
    </div>
    <div class="grid-container">
        <div class="hero-standard__inner grid-x">
            <div class="cell medium-7 medium-offset-1">
                <a href="#" class="hero-standard__open-modal-button js-open-modal"></a>
                <time class="hero-standard__read-time" datetime="">4 min read</time>
                <h1 class="hero-standard__title">On location: Star Wars: The Last Jedi</h1>
                <p class="hero-standard__subtitle hero-standard__subtitle--has-tags">Mark Hamill and Daisy Ridley returned to Skellig Michael, County Kerry, for Star Wars: The Last Jedi, this time with director Rian Johnson</p>
                <div class="hero-standard__tags">
                    <div class="hashtags hashtags--has-background" data-module="hashtags">
                        <ul>
                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="citybreak" onclick="window.location='#citybreak'" role="button">#Citybreak</span></li>
                            <li><span class="hashtags__link js-hashtag-link" data-tag-name="adventure" onclick="window.location='#adventure'" role="button">#Adventure</span></li>
                        </ul>
                    </div>
                </div>
                <div class="hero-standard__author">
                    <div class="hero-standard__author-image">
                        <img src="/media/hero-images/avatar.jpeg" alt="Mary Flapfish">
                    </div>
                    <div class="hero-standard__author-info">
                        <span class="hero-standard__author-name">
                            By Mary Flapfish
                        </span>
                        <time datetime="14-06-2017" class="hero-standard__date">14 June 2017</time>
                    </div>
                </div>
            </div>
            <div class="cell medium-2 medium-offset-2 small-3 small-offset-9">
                <div class="hero-standard__map">
                    <div class="hero-standard__map-inner"><img src="/img/maps/map.png" alt="County Kerry"></div>
                    <div class="hero-standard__map-county">County Kerry</div>
                </div>
            </div>
        </div>
    </div>
    <div class="video-modal js-modal">
        <div class="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="video-modal__video-container">
                            <a href="#" class="video-modal__close-button js-close-modal"></a>
                            <div class="video" data-autoplay="false" data-hide-controls="false" data-loop="false" data-muted="false">
                                <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">
                                            <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
                                        </video>
                                    </div>
                                </template>
                                <div class="js-video-container video__container"></div>
                                <div class="hashtags hashtags--has-background" data-module="hashtags">
                                    <ul>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="citybreak" onclick="window.location='#citybreak'" role="button">#Citybreak</span></li>
                                        <li><span class="hashtags__link js-hashtag-link" data-tag-name="adventure" onclick="window.location='#adventure'" role="button">#Adventure</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
 
<header class="hero-standard{{#unless imageMap}} hero-standard--without-map{{/unless}}{{#if fullVideo}} hero-standard--has-video{{/if}}"
    data-has-cinegraph="{{#if background.video}}true{{else}}false{{/if}}"
    data-has-video="{{#if fullVideo}}true{{else}}false{{/if}}"
    data-module="heroStandard"
    data-preload="true">
    {{> @cp-medium-image backgroundResponsiveImage}}
    {{#if likeButton}}
    {{> @cp-hero-like-button likeButton}}
    {{/if}}
    {{#if background.video}}
        <div class="hero-standard__cinegraph-container js-cinegraph-container" data-video="{{jsonSerializer background.video}}">
            <video class="hero-standard__cinegraph js-cinegraph" autoplay loop muted preload playsinline></video>
        </div>
    {{/if}}
    <div class="grid-container">
        <div class="hero-standard__inner grid-x">
            <div class="cell medium-7 medium-offset-1">
                {{#if fullVideo}}
                    <a href="#" class="hero-standard__open-modal-button js-open-modal"></a>
                {{/if}}
                <time class="hero-standard__read-time" datetime="{{timeSpan.stamp}}">{{timeSpan.text}}</time>
                <h1 class="hero-standard__title">{{title}}</h1>
                <p class="hero-standard__subtitle{{#if tags}} hero-standard__subtitle--has-tags{{/if}}">{{subtitle}}</p>
                {{#if tags }}
                    <div class="hero-standard__tags">
                        {{> @cp-hashtags tags }}
                    </div>
                {{/if}}
                {{#if author.name}}
                    <div class="hero-standard__author">
                        {{#if author.avatar}}
                        <div class="hero-standard__author-image">
                            <img src="{{author.avatar}}" alt="{{author.name}}">
                        </div>
                        {{/if}}
                        <div class="hero-standard__author-info">
                            <span class="hero-standard__author-name">
                                {{author.preposition}} {{author.name}}
                            </span>
                {{/if}}
                        <time datetime="{{articleDateTime.stamp}}" class="hero-standard__date">{{articleDateTime.displayDate}}</time>
                {{#if author.name}}
                        </div>
                    </div>
                {{/if}}
            </div>
            {{#if imageMap}}
                <div class="cell medium-2 medium-offset-2 small-3 small-offset-9">
                    <div class="hero-standard__map">
                        <div class="hero-standard__map-inner"><img src="{{imageMap.image}}" alt="{{imageMap.county}}"></div>
                        <div class="hero-standard__map-county">{{imageMap.county}}</div>
                    </div>
                </div>
            {{/if}}
        </div>
    </div>
    {{> @cp-video-modal}}
</header>
 
{
  "preload": true,
  "backgroundResponsiveImage": null,
  "author": {
    "preposition": "By",
    "avatar": "/media/hero-images/avatar.jpeg",
    "name": "Mary Flapfish"
  },
  "title": "On location: Star Wars: The Last Jedi",
  "tags": {
    "hasBackground": true,
    "hashtags": [
      {
        "text": "#Citybreak",
        "url": "#citybreak",
        "tagName": "citybreak",
        "openOnClick": true
      },
      {
        "text": "#Adventure",
        "url": "#adventure",
        "tagName": "adventure",
        "openOnClick": true
      }
    ]
  },
  "subtitle": "Mark Hamill and Daisy Ridley returned to Skellig Michael, County Kerry, for Star Wars: The Last Jedi, this time with director Rian Johnson",
  "timeSpan": {
    "text": "4 min read"
  },
  "articleDateTime": {
    "stamp": "14-06-2017",
    "displayDate": "14 June 2017"
  },
  "imageMap": {
    "image": "/img/maps/map.png",
    "county": "County Kerry"
  },
  "likeButton": {
    "buttonText": "Save to my board",
    "card": {
      "isFeatured": true,
      "cardType": "Generic",
      "responsiveImage": {
        "forceLoad": true,
        "dominantColour": "#938C7D",
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ],
        "fallbackImageUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
      },
      "webAppMode": true,
      "likeText": "Like",
      "cardId": 1338,
      "pageType": "Accommodation",
      "title": "Accom example",
      "subtitle": "",
      "locationName": "Belfast",
      "location": {
        "longitude": -5.95577,
        "latitude": 54.59623
      },
      "timeSpan": {
        "text": "14 - 18 March"
      },
      "starRating": {
        "rating": 4,
        "total": 5
      },
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Citybreak",
            "url": "#citybreak",
            "tagName": "citybreak"
          },
          {
            "text": "#Adventure",
            "url": "#adventure",
            "tagName": "adventure"
          },
          {
            "text": "#Surfing",
            "url": "#surfing",
            "tagName": "surfing"
          }
        ]
      }
    }
  },
  "fullVideo": {
    "isYouTube": false,
    "video": {
      "videoUrls": [
        {
          "type": "video/mp4",
          "url": "http://techslides.com/demos/sample-videos/small.mp4"
        }
      ]
    }
  },
  "background": {
    "video": [
      {
        "type": "video/webm",
        "largeUrl": "https://d3fenhwk93s16g.cloudfront.net/9g3i6w/hd_mp4.webm",
        "smallUrl": "http://techslides.com/demos/sample-videos/small.webm"
      },
      {
        "type": "video/mp4",
        "largeUrl": "https://d3fenhwk93s16g.cloudfront.net/9g3i6w/hd_mp4.mp4",
        "smallUrl": "http://techslides.com/demos/sample-videos/small.mp4"
      }
    ]
  }
}

There are no notes for this item.