<div class="rich-media-atom" data-module="richMediaAtom" data-isYouTube="false">
<div class="rich-media-atom__inner js-atom-inner">
<div class="rich-media-atom__image">
<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-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=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-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
</picture>
</figure>
</div>
<div class="rich-media-atom__image-overlay js-image-overlay"></div>
<div class="rich-media-atom__content">
<p class="rich-media-atom__title js-title">A guide to Galway</p>
<p class="rich-media-atom__subtitle js-subtitle">Georgia, Galway tour guide</p>
</div>
<div class="rich-media-atom__button js-button">
<div class="rich-media-atom__icon rich-media-atom__icon--play"></div>
</div>
</div>
<div class="rich-media-atom__modal js-modal">
<div class="rich-media-atom__modal-inner">
<a href="#" class="rich-media-atom__modal-close js-modal-close "></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" data-poster-url="https://via.placeholder.com/1600x900.png">
<video controls playsinline class="video__player js-video-player">
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.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 controls playsinline class="video__player js-video-player">
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm" />
<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 class="rich-media-atom" data-module="richMediaAtom" data-isYouTube="{{fullVideo.isYouTube}}" {{#if isInsideTransform}}data-isInsideTransform="true"{{/if}} {{#if fullVideo.isYouTube}}data-videoid="{{fullVideo.video.videoId}}"{{/if}}>
<div class="rich-media-atom__inner js-atom-inner">
{{#if backgroundResponsiveImage}}
<div class="rich-media-atom__image">
{{> @cp-medium-image backgroundResponsiveImage}}
</div>
{{/if}}
<div class="rich-media-atom__image-overlay js-image-overlay"></div>
<div class="rich-media-atom__content">
<p class="rich-media-atom__title js-title">{{title}}</p>
<p class="rich-media-atom__subtitle js-subtitle">{{subtitle}}</p>
</div>
<div class="rich-media-atom__button js-button">
<div class="rich-media-atom__icon{{#unless is360Video}} rich-media-atom__icon--play{{/unless}}"></div>
</div>
</div>
{{#if fullVideo}}
<div class="rich-media-atom__modal js-modal">
<div class="rich-media-atom__modal-inner">
<a href="#" class="rich-media-atom__modal-close js-modal-close {{#if fullVideo.isYouTube}} rich-media-atom__modal-close--youtube{{/if}}"></a>
{{> @cp-medium-video doNotInitialise=true isYouTube=fullVideo.isYouTube isYouku=fullVideo.isYouku video=fullVideo.video autoplay=false hideControls=false loop=false muted=false }}
</div>
</div>
{{/if}}
</div>
{
"is360Video": false,
"title": "A guide to Galway",
"subtitle": "Georgia, Galway tour guide",
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
}
]
},
"fullVideo": {
"isYouTube": false,
"video": {
"videoUrls": [
{
"type": "video/webm",
"url": "http://techslides.com/demos/sample-videos/small.webm"
},
{
"type": "video/mp4",
"url": "http://techslides.com/demos/sample-videos/small.mp4"
}
],
"mobileVideoUrls": [
{
"type": "video/mp4",
"url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
},
{
"type": "video/mp4",
"url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
}
],
"posterUrl": "https://via.placeholder.com/1600x900.png"
}
}
}
There are no notes for this item.