England Football

Large Video Player: With Vimeo 

<section class="large-video-player container">
    <div class="large-video-player__inner container__content">
        <h2 class="heading-section">Latest Videos</h2>
        <div class="large-video-player__content">
            <div class="large-video-player__video-wrap">
                <iframe src="https://player.vimeo.com/video/516264036?color=efc900" allow="autoplay; fullscreen; picture-in-picture" title="youtube video" allowfullscreen></iframe>

            </div>
            <div class="large-video-player__video-info">
                <div class="datetime-info">
                    <span class="date">11 Oct 2021</span>
                    <span class="duration">3:30</span>
                    <span class="short-title">Three Lions</span>
                </div>
                <h3 class="title">
                    Raheem Sterling Seals Comeback Win To Top Group
                </h3>
                <hr />
                <p class="description">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt uttempor labore et dolorgna aliqua.
                </p>
            </div>
        </div>
    </div>
</section>

EF-412 Large Vieo Player

Outstanding items

  1. Styling of video iframe.
{
  "heading": "Latest Videos",
  "date": "11 Oct 2021",
  "duration": "3:30",
  "title": "Raheem Sterling Seals Comeback Win To Top Group",
  "shortTitle": "Three Lions",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt uttempor labore et dolorgna aliqua.",
  "youtubeId": "",
  "vimeoId": "516264036"
}
  • Content: 
    .large-video-player {
  &__inner {
    background-color: $white;
  }

  &__content {
    display: flex;
    flex-direction: column;
    margin-top: 4rem;
  }

  &__video-wrap {
    iframe {
      width: 100%;
      height: 18.4rem;
    }
  }

  &__video-info {
    padding-top: 1rem;

    .datetime-info {
      @include text-xs;

      color: $color-interface-light;
      opacity: 0.7;
      height: 1.4rem;
      max-height: 1.4rem;

      .date {
        &::after {
          content: '';
          background: url(./assets/images/gray-ellipse-2x2.svg) no-repeat center;
          margin: 0 1.2rem;
          display: inline-block;
          width: 0.2rem;
          height: 0.2rem;
          position: relative;
          top: -0.3rem;
        }
      }

      .duration {
        &::before {
          content: '';
          background: url(./assets/images/clock-icon.svg) no-repeat center;
          margin-right: 0.8rem;
          display: inline-block;
          width: 1.4rem;
          height: 1.4rem;
          position: relative;
          top: 0.2rem;
        }
      }

      .short-title {
        display: none;
      }
    }

    .title {
      color: $blue;
      padding: 0.8rem 0;

      @extend .heading-3;
    }

    hr {
      width: 8rem;
      max-width: 8rem;
      height: 0.2rem;
      border: 0;
      margin: 0;
      border-top: 0.5rem solid $red;
    }

    .description {
      @extend .p-1;

      padding-top: 1.2rem;
      color: $color-interface-light;
    }
  }

  @media screen and (min-width: $mq-medium) {
    &__inner {
      width: 100%;
      height: 100%;
    }

    &__content {
      flex-direction: row-reverse;
      align-items: center;
      max-width: 114rem;
    }

    &__video-wrap {
      width: 70%;
      iframe {
        width: 100%;
        height: 43rem;
      }
    }

    &__video-info {
      padding-top: 0;
      padding-right: 1.5rem;
      width: 30%;

      .datetime-info {
        @include text-s--narrow;
        .duration {
          display: none;
        }
        .short-title {
          display: inline;
          text-transform: uppercase;
        }
      }
      .title {
        padding: 1.6rem 0;
        font-size: 4rem;
        line-height: 3.6rem;
      }
      .description {
        padding-top: 1.6rem;
      }
    }
  }
}
:root [data-brand='womens'],
:root [data-brand='mens'] {
  .large-video-player__video-info {
    .title {
      font-size: 2.8rem;
      line-height: 3.4rem;
    }

    @media screen and (max-width: $mq-medium) {
      .description {
        font-size: 1.4rem;
        line-height: 2rem;
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    .large-video-player__video-info .title {
      font-size: 5.6rem;
      line-height: 5rem;
    }
  }
}
  • URL: /components/raw/large-video-player/large-video-player.scss
  • Filesystem Path: src/library/components/large-video-player/large-video-player.scss
  • Size: 2.9 KB 
<section class="large-video-player container">
  <div class="large-video-player__inner container__content">
    {{#if heading}}<h2 class="heading-section">{{heading}}</h2>{{/if}}
    <div class="large-video-player__content">
      <div class="large-video-player__video-wrap">
        {{#unless youtubeId}}
        <iframe src="https://player.vimeo.com/video/{{vimeoId}}?color=efc900"
          allow="autoplay; fullscreen; picture-in-picture" title="youtube video" allowfullscreen></iframe>
        {{/unless}}

        {{#unless vimeoId}}
        <iframe src="https://www.youtube.com/embed/{{youtubeId}}"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          title="vimeo video" allowfullscreen></iframe>
        {{/unless}}

      </div>
      <div class="large-video-player__video-info">
        <div class="datetime-info">
          <span class="date">{{date}}</span>
          <span class="duration">{{duration}}</span>
          <span class="short-title">{{shortTitle}}</span>
        </div>
        <h3 class="title">
          {{title}}
        </h3>
        <hr />
        <p class="description">
          {{description}}
        </p>
        {{#if enableShare}}
        {{render '@share'}}
        {{/if}}
      </div>
    </div>
  </div>
</section>