<header class="hero-video" data-module="heroVideo" 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="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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="" alt="Alt Text"> </picture> </figure> <div class="hero-video__content grid-container"> <div class="grid-x grid-padding-x"> <div class="cell medium-12 large-7 hero-video__open-modal-button-container"> <a href="#" class="hero-video__open-modal-button js-open-modal"></a> </div> <div class="cell medium-offset-4 medium-8 large-offset-0 large-4"> <div class="hero-video__text-container"> <h1 class="hero-video__title">Ireland is always in season</h1> <p class="hero-video__lead">The thrills of a street festival, the incredible culture of bustling cities, the warm welcome of friendly locals: no matter the season, Ireland is ready for you</p> </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 class="hero-video__sidebar"></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> </div> </div> </div> </div> </div> </div> </header>
<header class="hero-video" data-module="heroVideo" data-preload="true"> {{#if background.video}} <div class="hero-video__cinegraph-video-container js-cinegraph-container" data-video="{{jsonSerializer background.video}}"> <video class="hero-video__cinegraph-video js-cinegraph" 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-7 hero-video__open-modal-button-container"> {{#if fullVideo}}<a href="#" class="hero-video__open-modal-button js-open-modal"></a>{{/if}} </div> <div class="cell medium-offset-4 medium-8 large-offset-0 large-4"> <div class="hero-video__text-container"> <h1 class="hero-video__title">{{title}}</h1> <p class="hero-video__lead">{{subtitle}}</p> </div> {{> @cp-hero-like-button likeButton}} </div> </div> </div> <div class="hero-video__sidebar"></div> {{> @cp-video-modal}} </header>
{ "preload": true, "background": { "responsiveImage": { "altText": "Alt Text", "lowResolutionUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80", "smallUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" } ] } }, "title": "Ireland is always in season", "subtitle": "The thrills of a street festival, the incredible culture of bustling cities, the warm welcome of friendly locals: no matter the season, Ireland is ready for you", "fullVideo": { "isYouTube": false, "video": { "videoUrls": [ { "type": "video/mp4", "url": "http://techslides.com/demos/sample-videos/small.mp4" } ] } }, "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.