Rich Media Atom: Youtube 

<div class="rich-media-atom" data-module="richMediaAtom" data-isYouTube="true" data-videoid="398IVitaZoY">
    <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&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;100&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-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;640&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-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                    <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;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  rich-media-atom__modal-close--youtube"></a>
            <div class="video" data-youtube-video="true" data-autoplay="false" data-hide-controls="false" data-loop="false" data-muted="false" 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>
</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": true,
    "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",
      "videoId": "398IVitaZoY"
    },
    "isYouku": false
  }
}

There are no notes for this item.