England Football

Hero Video Banner: With Overlay And Gradient 

<div class="banner banner--gradient">
    <div class="video hero-video" data-behavior="video" data-video-id="M7lc1UVf-VE">
        <div class="video__poster">
            <picture>
                <source media="(max-width: 600px)" srcset="/assets/example-content/womens-hero-600.png">
                <source media="(min-width: 600px)" srcset=" /assets/example-content/womens-hero.png">
                <img src="/assets/example-content/womens-hero.png" alt="">
            </picture>

            <div class="hero-overlay ">
                <div class="hero-overlay--gradient"></div>
                <div class="hero-overlay__content">
                    <div class="hero-overlay__tag">Tag for content</div>
                    <div class="hero-overlay__subtitle">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </div>
                    <div class="hero-overlay__cta-btn">
                        <button class="cta cta--tertiary play-button">
                            <svg>
                                <use xlink:href="/assets/images/play-icon.svg#play-icon"></use>
                            </svg>
                            Button cta</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="video__player-wrap">
            <div id="player" class="youtube-video-player"></div>
        </div>
    </div>
</div>

No notes defined.

{
  "modifier": "gradient",
  "with-overlay": true
}
  • Content: 
    .hero-video {
  display: flex;
  align-items: center;
  max-height: 700px;
  overflow: hidden;

  .video__poster:not(.visually-hidden) {
    position: relative;
    width: 100%;

    .video--is-ready & {
      cursor: pointer;
    }
  }
  .play-button:not(.cta) {
    @include text-m;

    background: url('./assets/images/play-button.svg') no-repeat top center;
    background-size: 75px 75px;
    bottom: 20%;
    color: $white;
    letter-spacing: 0.6em;
    padding-top: 85px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    z-index: 1;
  }
  iframe {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
  }
  .video__player-wrap:not(.visually-hidden) {
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
    width: 100%;
    z-index: 1;
  }
}
  • URL: /components/raw/hero-video-banner/hero-video-banner.scss
  • Filesystem Path: src/library/modules/hero-banner/hero-video-banner/hero-video-banner.scss
  • Size: 883 Bytes 
<div class="banner {{#if modifier}}banner--{{modifier}}{{/if}}">
  <div class="video hero-video" data-behavior="video" data-video-id="M7lc1UVf-VE">
    <div class="video__poster">
      <picture>
        <source media="(max-width: 600px)" srcset="/assets/example-content/womens-hero-600.png">
        <source media="(min-width: 600px)" srcset=" /assets/example-content/womens-hero.png">
        <img src="/assets/example-content/womens-hero.png" alt="">
      </picture>
      {{#unless with-overlay}}
      <div class="play-button">Watch</div>
      {{/unless}}

      {{#if with-overlay}}
      {{render '@hero-overlay--video-overlay'}}
      {{/if}}
    </div>
    <div class="video__player-wrap">
      <div id="player" class="youtube-video-player"></div>
    </div>
  </div>
</div>