Video Carousel Hero 

<header class="vch js-vch vch--3" data-module="VideoCarouselHero" data-transition="1200" data-duration="7000" data-line-transition="600">
    <div class="vch-block vch-block--bottom">
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="cell">
                    <nav class="vch-controls">
                        <button class="vch-controls__trigger vch-controls__trigger--prev  js-controls" data-type="prev">
                            Previous
                        </button>
                        <button class="vch-controls__trigger vch-controls__trigger--play is-hidden js-controls" data-type="play">
                            Play
                        </button>
                        <button class="vch-controls__trigger vch-controls__trigger--pause  js-controls" data-type="pause">
                            Pause
                        </button>
                        <button class="vch-controls__trigger vch-controls__trigger--next  js-controls" data-type="next">
                            Next
                        </button>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="vch-block vch-block--top">
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="cell">
                    <div class="vch-progress">
                        <div class="vch-progress__slide is-active js-progress">
                            <span class="vch-progress__bar js-bar"></span>
                            <span class="vch-progress__title">Liam Neeson</span>
                        </div>
                        <div class="vch-progress__slide js-progress">
                            <span class="vch-progress__bar js-bar"></span>
                            <span class="vch-progress__title">Cillian Murphy</span>
                        </div>
                        <div class="vch-progress__slide js-progress">
                            <span class="vch-progress__bar js-bar"></span>
                            <span class="vch-progress__title">Sharon Horgan</span>
                        </div>
                    </div>
                    <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>
            </div>
        </div>
    </div>
    <div class="vch-carousel">
        <article class="vch-carousel__slide is-active js-slide">
            <div class="vch-video">
                <div class="video" data-youtube-video="true" data-autoplay="true" data-hide-controls="true" data-loop="true" data-muted="true" data-ratio="">
                    <template class="js-youtube-template">
                        <iframe src="https://www.youtube-nocookie.com/embed/398IVitaZoY?playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
                    </template>
                    <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                        <div class="video__player js-video-player"></div>
                    </div>
                </div>
            </div>
            <div class="grid-container">
                <div class="grid-x grid-padding-x">
                    <div class="cell">
                        <div class="vch-content">
                            <span class="vch-content__eyebrow">Liam Neeson</span>
                            <h1 class="vch-content__title">The Landscapes</h1>
                            <p class="vch-content__body">Weave your way around the Wild Atlantic Way’s most notherly points and enjoy maritime history and incredible views.</p>
                            <a href="/" class="button-p1 button-p1--with-icon js-vchBtn " role="button">Discover more</a>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        <article class="vch-carousel__slide js-slide">
            <div class="vch-video">
                <div class="video" data-autoplay="true" data-hide-controls="true" data-loop="true" data-muted="true">
                    <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">
                                <source src="/media/homepage-hero/TI_Hompage_video_mobile2.mp4" type="video/mp4" />
                                <source src="/media/homepage-hero/TI_Hompage_video_mobile2.mp4" type="video/mp4" />
                            </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="/media/homepage-hero/TI_Hompage_video_21-9.mp4" type="video/mp4" />
                            </video>
                        </div>
                    </template>
                    <div class="js-video-container video__container"></div>
                </div>
            </div>
            <div class="grid-container">
                <div class="grid-x grid-padding-x">
                    <div class="cell">
                        <div class="vch-content">
                            <span class="vch-content__eyebrow">Cillian Murphy</span>
                            <h2 class="vch-content__title">Music</h2>
                            <p class="vch-content__body">Weave your way around the Wild Atlantic Way’s most notherly points and enjoy maritime history and incredible views.</p>
                            <a href="/" class="button-p1 button-p1--with-icon js-vchBtn " role="button">Discover more</a>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        <article class="vch-carousel__slide js-slide">
            <div class="vch-video">
                <div class="video" data-autoplay="true" data-hide-controls="true" data-loop="true" data-muted="true">
                    <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">
                                <source src="/media/homepage-hero/TI_Hompage_video_mobile2.mp4" type="video/mp4" />
                                <source src="/media/homepage-hero/TI_Hompage_video_mobile2.mp4" type="video/mp4" />
                            </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="/media/homepage-hero/TI_Hompage_video_21-9.mp4" type="video/mp4" />
                            </video>
                        </div>
                    </template>
                    <div class="js-video-container video__container"></div>
                </div>
            </div>
            <div class="grid-container">
                <div class="grid-x grid-padding-x">
                    <div class="cell">
                        <div class="vch-content">
                            <span class="vch-content__eyebrow">Sharon Horgan</span>
                            <h2 class="vch-content__title">The Characters</h2>
                            <p class="vch-content__body">Weave your way around the Wild Atlantic Way’s most notherly points and enjoy maritime history and incredible views.</p>
                            <a href="/" class="button-p1 button-p1--with-icon js-vchBtn " role="button">Discover more</a>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>
</header>
 
{{#if slides}}
<header class="vch js-vch vch--{{slides.length}}" data-module="VideoCarouselHero" data-transition="{{transitionBetweenSlides}}" data-duration="{{slideTimeOnScreen}}" data-line-transition="{{fadeOfCompleteLineBeforeSlideTransition}}">
    {{#if controls}}
    <div class="vch-block vch-block--bottom">
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="cell">
                    <nav class="vch-controls">
                        {{#each controls}}
                        <button class="vch-controls__trigger vch-controls__trigger--{{this.type}} {{this.cssClass}} js-controls" data-type="{{this.type}}">
                            {{this.label}}
                        </button>
                        {{/each}}
                    </nav>
                </div>
            </div>
        </div>
    </div>
    {{/if}}
    <div class="vch-block vch-block--top">
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="cell">
                    <div class="vch-progress">
                        {{#each slides}}
                        <div class="vch-progress__slide{{#if @first}} is-active{{/if}} js-progress">
                            <span class="vch-progress__bar js-bar"></span>
                            <span class="vch-progress__title">{{this.eyebrow}}</span>
                        </div>
                        {{/each}}
                    </div>
                    {{> @cp-hero-like-button likeButton}}
                </div>
            </div>
        </div>
    </div>
    <div class="vch-carousel">
        {{#each slides}}
        <article class="vch-carousel__slide{{#if @first}} is-active{{/if}} js-slide">
            <div class="vch-video">
                {{#if fullVideo}}
                    {{> @cp-medium-video doNotInitialise=true isYouTube=fullVideo.isYouTube isYouku=fullVideo.isYouku video=fullVideo.video autoplay=true hideControls=true loop=true muted=true }}
                {{/if}}
            </div>
            <div class="grid-container">
                <div class="grid-x grid-padding-x">
                    <div class="cell">
                        <div class="vch-content">
                            <span class="vch-content__eyebrow">{{this.eyebrow}}</span>
                            {{#if @first}}
                            <h1 class="vch-content__title">{{this.title}}</h1>
                            {{else}}
                            <h2 class="vch-content__title">{{this.title}}</h2>
                            {{/if}}
                            <p class="vch-content__body">{{this.body}}</p>
                            {{> @cp-button-primary this.button}}
                        </div>
                    </div>
                </div>
            </div>
        </article>
        {{/each}}
    </div>
</header>
{{/if}}
 
{
  "preload": true,
  "transitionBetweenSlides": 1200,
  "slideTimeOnScreen": 7000,
  "fadeOfCompleteLineBeforeSlideTransition": 600,
  "controls": [
    {
      "type": "prev",
      "label": "Previous",
      "cssClass": ""
    },
    {
      "type": "play",
      "label": "Play",
      "cssClass": "is-hidden"
    },
    {
      "type": "pause",
      "label": "Pause",
      "cssClass": ""
    },
    {
      "type": "next",
      "label": "Next",
      "cssClass": ""
    }
  ],
  "slides": [
    {
      "eyebrow": "Liam Neeson",
      "title": "The Landscapes",
      "body": "Weave your way around the Wild Atlantic Way’s most notherly points and enjoy maritime history and incredible views.",
      "fullVideo": {
        "isYouTube": true,
        "video": {
          "videoId": "398IVitaZoY",
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "button": {
        "modifier": "with-icon",
        "url": "/",
        "text": "Discover more",
        "cssClasses": "js-vchBtn"
      }
    },
    {
      "eyebrow": "Cillian Murphy",
      "title": "Music",
      "body": "Weave your way around the Wild Atlantic Way’s most notherly points and enjoy maritime history and incredible views.",
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "videoUrls": [
            {
              "type": "video/mp4",
              "url": "/media/homepage-hero/TI_Hompage_video_21-9.mp4"
            }
          ],
          "mobileVideoUrls": [
            {
              "type": "video/mp4",
              "url": "/media/homepage-hero/TI_Hompage_video_mobile2.mp4"
            },
            {
              "type": "video/mp4",
              "url": "/media/homepage-hero/TI_Hompage_video_mobile2.mp4"
            }
          ],
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "button": {
        "modifier": "with-icon",
        "url": "/",
        "text": "Discover more",
        "cssClasses": "js-vchBtn"
      }
    },
    {
      "eyebrow": "Sharon Horgan",
      "title": "The Characters",
      "body": "Weave your way around the Wild Atlantic Way’s most notherly points and enjoy maritime history and incredible views.",
      "fullVideo": {
        "isYouTube": false,
        "video": {
          "videoUrls": [
            {
              "type": "video/mp4",
              "url": "/media/homepage-hero/TI_Hompage_video_21-9.mp4"
            }
          ],
          "mobileVideoUrls": [
            {
              "type": "video/mp4",
              "url": "/media/homepage-hero/TI_Hompage_video_mobile2.mp4"
            },
            {
              "type": "video/mp4",
              "url": "/media/homepage-hero/TI_Hompage_video_mobile2.mp4"
            }
          ],
          "posterUrl": "https://via.placeholder.com/1600x900.png"
        }
      },
      "button": {
        "modifier": "with-icon",
        "url": "/",
        "text": "Discover more",
        "cssClasses": "js-vchBtn"
      }
    }
  ],
  "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"
          }
        ]
      }
    }
  }
}

There are no notes for this item.