England Football

Hero Video Banner: With 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="play-button">Watch</div>

        </div>
        <div class="video__player-wrap">
            <div id="player" class="youtube-video-player"></div>
        </div>
    </div>
</div>

No notes defined.

{
  "modifier": "gradient"
}
  • 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>