Themed Page Hero Video: You Tube

HTML
View
Context
Info
Notes


        <header class="tphv js-tphv" data-module="ThemedPageHeroVideo">
    <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="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell">
                <div class="tphv-content">
                    <h1 class="tphv-content__title">Ireland’s Landscapes</h1>
                    <p class="tphv-content__body">Dramatic, stirring and sublimely beautiful, Ireland’s landscapes have been shaped by time and the elements to something unique.</p>
                    <div class="tphv-content__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>
                <div class="tphv-video tphv-video--you-tube">
                    <div class="tphv-video__inside">
                        <button class="tphv-video__trigger js-trigger">
                            Play video
                        </button>
                        <div class="video" data-youtube-video="true" data-autoplay="false" data-hide-controls="false" data-loop="false" data-muted="" 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="tphv-video__shadow is-top"></div>
                    <div class="tphv-video__shadow is-right"></div>
                    <div class="tphv-video__shadow is-bottom"></div>
                    <div class="tphv-video__shadow is-left"></div>
                </div>
            </div>
        </div>
    </div>
    <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-1535479804851-93f60320e644?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-1535479804851-93f60320e644?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-1535479804851-93f60320e644?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-1535479804851-93f60320e644?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>
</header>


        {{#if fullVideo}}
<header class="tphv js-tphv" data-module="ThemedPageHeroVideo">
    {{#if likeButton}}
        {{> @cp-hero-like-button likeButton}}
    {{/if}}
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell">
                <div class="tphv-content">
                    {{#if title}}
                    <h1 class="tphv-content__title">{{this.title}}</h1>
                    {{/if}}
                    {{#if body}}
                    <p class="tphv-content__body">{{this.body}}</p>
                    {{/if}}
                    {{#if contentTags }}
                    <div class="tphv-content__tags">
                        {{> @cp-hashtags contentTags }}
                    </div>
                    {{/if}}
                </div>
                <div class="tphv-video {{#if fullVideo.isYouTube}}tphv-video--you-tube{{/if}}">
                    <div class="tphv-video__inside">
                        <button class="tphv-video__trigger js-trigger">
                            Play video
                        </button>
                        {{> @cp-medium-video doNotInitialise=true isYouTube=fullVideo.isYouTube isYouku=fullVideo.isYouku video=fullVideo.video hideControls=false loop=false autoplay=false}}
                    </div>
                    <div class="tphv-video__shadow is-top"></div>
                    <div class="tphv-video__shadow is-right"></div>
                    <div class="tphv-video__shadow is-bottom"></div>
                    <div class="tphv-video__shadow is-left"></div>
                </div>
            </div>
        </div>
    </div>
    {{#if backgroundResponsiveImage}}
    {{> @cp-medium-image
        altText=backgroundResponsiveImage.altText
        sources=backgroundResponsiveImage.sources
        fallbackImageUrl=backgroundResponsiveImage.fallbackImageUrl
        lowResolutionUrl=backgroundResponsiveImage.lowResolutionUrl
        tags=null
    }}
    {{/if}}
</header>
{{/if}}


            {
  "preload": true,
  "title": "Ireland’s Landscapes",
  "body": "Dramatic, stirring and sublimely beautiful, Ireland’s landscapes have been shaped by time and the elements to something unique.",
  "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": "/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",
      "videoId": "398IVitaZoY"
    },
    "isYouku": false
  },
  "backgroundResponsiveImage": {
    "altText": "Alt Text",
    "lowResolutionUrl": "https://images.unsplash.com/photo-1535479804851-93f60320e644?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-1535479804851-93f60320e644?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
        "smallUrl": "https://images.unsplash.com/photo-1535479804851-93f60320e644?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
      }
    ],
    "caption": {
      "location": "Galway",
      "description": "International Arts Festival"
    }
  },
  "contentTags": {
    "hasBackground": true,
    "hashtags": [
      {
        "text": "#Citybreak",
        "url": "#citybreak",
        "tagName": "citybreak",
        "openOnClick": true
      },
      {
        "text": "#Adventure",
        "url": "#adventure",
        "tagName": "adventure",
        "openOnClick": true
      }
    ]
  },
  "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"
          }
        ]
      }
    }
  }
}

Handle: @cp-themed-page-hero-video--you-tube
Variants (2): Default , You Tube
Preview:
- With layout
- Component only
Filesystem Path: src/patterns/03-components/hero/cp-themed-page-hero-video.hbs
References (4): @cp-hero-like-button, @cp-hashtags, @cp-medium-video, @cp-medium-image

There are no notes for this item.

Themed Page Hero Video: You Tube

Hero

Media

Site Furniture

Text

Quote

Card Collection

Card Collection with Quote

Card Carousel

Featured Carousel

Image Carousel

Editorial Map & Card Grid

Featured Trip Ideas Card Carousel

Hashtags

Highlight List

Icon Cards

Location Access

Offer Cards Carousel

Offset Tout Collection

Porthole Tabber

Tabbed Content

Collage Hero

404 Hero

Experience Brand

Standard

Video

Homepage

Shared Board Hero

Themed Page Hero Video

Media Collage

Video

Image

Rich Media Atom

Thematic Callout

FAB

Navigation

Featured Highlight Item

Key Information Block

Responsive Table

Quote

Richtext

Campaign Tout

Large Image Tout

Standard Tout

Geolocated Container

Travel To

Hero

Datepicker

Social Share

Immersive Weather Tabs