England Football

Efl Large Video Player: Vimeo Video 

<section class="efl-large-video-player efl-blue" data-behavior="efl-large-video-player">
    <div class="efl-large-video-player__inner">
        <div class="efl-large-video-player__content">
            <h2>Example</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ut labore et ut labore et dolorgna aliqua.</p>
            <a href="#">Hyperlink text to access the next page</a>

            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur</li>
                <li>Lorem ipsum dolor sit amet, consectetur</li>
                <li>Lorem ipsum dolor sit amet, consectetur</li>
                <li>Lorem ipsum dolor sit amet, consectetur</li>
            </ul>
            <p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
        </div>
        <div class="efl-large-video-player__video-wrap" data-video-type="vimeo" data-video-id="516264036">
            <div class="efl-large-video-player__video-poster">
                <img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy" />
            </div>
            <div class="efl-large-video-player__video-thumbnail">
                <button tabindex="0" aria-label="Example play in vimeo video player">
                    <img src="/assets/example-content/womens-hero.png" alt="" loading="lazy" />
                </button>
            </div>
            <div id="efl-large-video-player" class="efl-large-video-player__player"></div>
        </div>
    </div>
</section>

EF-412 Large Vieo Player

Outstanding items

  1. Styling of video iframe.
{
  "title": "Example",
  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et  ut labore et  ut labore et dolorgna aliqua.",
  "videoId": "516264036",
  "type": "vimeo",
  "theme": "efl-blue"
}
  • Content: 
    import Player from '@vimeo/player';
import { loadYouTubeApi } from '../video/video';

export default parentElement => {
  const checkThumbnail = currentEle => {
    const playButton = currentEle.querySelector(
      '.efl-large-video-player__video-thumbnail button'
    );
    const thumbnailImg = currentEle.querySelector(
      '.efl-large-video-player__video-thumbnail'
    );

    if (playButton.querySelector('img')) {
      // eslint-disable-next-line no-param-reassign
      currentEle.querySelector(
        '.efl-large-video-player__player'
      ).style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      thumbnailImg.style.display = 'block';
    } else {
      // eslint-disable-next-line no-param-reassign
      currentEle.querySelector(
        '.efl-large-video-player__player'
      ).style.display = 'block';
      // eslint-disable-next-line no-param-reassign
      thumbnailImg.style.display = 'none';
    }
  };

  const onPlayerReady = event => {
    // To capture error on video
    event.target.playVideo();
    event.target.stopVideo();
  };

  const onPlayerError = currentEle => {
    const errorImg = currentEle.querySelector(
      '.efl-large-video-player__video-poster'
    );
    const thumbnailImg = currentEle.querySelector(
      '.efl-large-video-player__video-thumbnail'
    );

    if (errorImg.querySelector('img')) {
      // eslint-disable-next-line no-param-reassign
      errorImg.style.display = 'block';
      // eslint-disable-next-line no-param-reassign
      thumbnailImg.style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      currentEle.querySelector(
        '.efl-large-video-player__player'
      ).style.display = 'none';
    } else {
      // eslint-disable-next-line no-param-reassign
      errorImg.style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      thumbnailImg.style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      currentEle.querySelector(
        '.efl-large-video-player__player'
      ).style.display = 'block';
    }
  };

  const onPlayerStateChange = (event, currentEle) => {
    if (event.data === 0) {
      checkThumbnail(currentEle);
    }
  };

  const initVimeoPlayer = (videoPlayerId, videoId, currentEle) => {
    const playButton = currentEle.querySelector(
      '.efl-large-video-player__video-thumbnail button'
    );
    const thumbnailImg = currentEle.querySelector(
      '.efl-large-video-player__video-thumbnail'
    );
    const videoPlayer = new Player(videoPlayerId, {
      id: videoId,
      autoplay: 0,
      muted: 0,
      title: 0,
      sidedock: 0,
      controls: 1,
    });

    videoPlayer
      .pause()
      .then(() => {
        // The video is loadded
      })
      .catch(() => {
        onPlayerError(currentEle);
      });

    videoPlayer.on('ended', () => {
      checkThumbnail(currentEle);
    });

    playButton.addEventListener('click', () => {
      videoPlayer.play();
      // eslint-disable-next-line no-param-reassign
      thumbnailImg.style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      currentEle.querySelector(
        '.efl-large-video-player__player'
      ).style.display = 'block';
    });

    playButton.addEventListener('keyup', event => {
      if (event.keyCode === 13) {
        // Cancel the default action, if needed
        event.preventDefault();
        playButton.click();
      }
    });

    checkThumbnail(currentEle);
  };

  const initYTPlayer = (videoPlayerId, videoId, currentEle) => {
    return new window.YT.Player(videoPlayerId, {
      height: '390',
      width: '640',
      videoId,
      playsinline: 1,
      events: {
        onReady: onPlayerReady,
        onStateChange: event => {
          onPlayerStateChange(event, currentEle);
        },
        onError: () => {
          onPlayerError(currentEle);
        },
      },
    });
  };

  const initVideo = () => {
    parentElement.forEach(currentEle => {
      const videoWrap = currentEle.querySelector(
        '.efl-large-video-player__video-wrap'
      );
      const videoPlayerId = currentEle
        .querySelector('.efl-large-video-player__player')
        .getAttribute('id');
      const { videoId, videoType } = videoWrap.dataset;
      const playButton = currentEle.querySelector(
        '.efl-large-video-player__video-thumbnail button'
      );
      const thumbnailImg = currentEle.querySelector(
        '.efl-large-video-player__video-thumbnail'
      );

      if (videoType === 'youtube') {
        const player = initYTPlayer(videoPlayerId, videoId, currentEle);

        playButton.addEventListener('click', () => {
          player.playVideo();
          // eslint-disable-next-line no-param-reassign
          thumbnailImg.style.display = 'none';
          // eslint-disable-next-line no-param-reassign
          currentEle.querySelector(
            '.efl-large-video-player__player'
          ).style.display = 'block';
        });

        playButton.addEventListener('keyup', event => {
          if (event.keyCode === 13) {
            // Cancel the default action, if needed
            event.preventDefault();
            playButton.click();
          }
        });

        checkThumbnail(currentEle);
      }
    });
    window.YouTubeIframeApiReady = true;
  };

  const initYTApi = () => {
    if (window.YouTubeIframeApiReady === undefined) {
      loadYouTubeApi();
      window.onYouTubeIframeAPIReady = () => {
        initVideo();
      };
      const autoplayYT = document.querySelector(
        '[data-behavior=autoplay-hero-video]'
      );

      if (
        autoplayYT &&
        autoplayYT.getAttribute('data-video-type') === 'youtube'
      ) {
        const autoplayTime = setInterval(() => {
          if (window.YouTubeIframeApiReady === true) {
            initVideo();
            clearInterval(autoplayTime);
          }
        }, 100);
      }
    } else if (window.YouTubeIframeApiReady === false) {
      window.onYouTubeIframeAPIReady = () => {
        initVideo();
      };
    } else if (window.YouTubeIframeApiReady === false) {
      window.onYouTubeIframeAPIReady = () => {
        window.YouTubeIframeApiReady = true;
        initVideo();
      };
    } else {
      initVideo();
    }
  };

  let youtubeVid = false;

  // check all efl large videos
  parentElement.forEach((currentEle, index) => {
    const videoWrap = currentEle.querySelector(
      '.efl-large-video-player__video-wrap'
    );
    const tempVideoPlayerId = currentEle
      .querySelector('.efl-large-video-player__player')
      .getAttribute('id');

    // dynamic video player id update
    currentEle
      .querySelector('.efl-large-video-player__player')
      .setAttribute('id', `${tempVideoPlayerId}-${index}`);

    const videoPlayerId = currentEle
      .querySelector('.efl-large-video-player__player')
      .getAttribute('id');

    const { videoId, videoType } = videoWrap.dataset;

    if (videoType === 'youtube') {
      youtubeVid = true;
    } else {
      initVimeoPlayer(videoPlayerId, videoId, currentEle);
    }

    if (youtubeVid) {
      initYTApi();
    }
  });
};
  • URL: /components/raw/efl-large-video-player/efl-large-video-player.js
  • Filesystem Path: src/library/components/efl-large-video-player/efl-large-video-player.js
  • Size: 7.2 KB
  • Content: 
    /* stylelint-disable no-descending-specificity */
.efl-large-video-player {
  @include rte;

  background-color: #214c99;
  padding: 4.1rem 3.2rem;
  position: relative;

  &::before {
    content: '';
    background-image: url('./assets/images/noise.png');
    background-repeat: repeat;
    mix-blend-mode: soft-light;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    opacity: 0.5;
    pointer-events: none;
  }

  &__inner {
    display: flex;
    flex-direction: column-reverse;
    row-gap: 2.4rem;
  }

  &__content {
    font-family: $text-font-ef;

    h2 {
      font-size: 2rem;
      line-height: 2.2rem;
      letter-spacing: -0.02em;
      font-weight: 500;
      color: $white;
      margin-bottom: 0;
      font-style: normal;
      &::after {
        content: '';
        border-bottom: 0.2rem solid $red;
        width: 8rem;
        display: block;
        margin: 0.8rem 0;
      }
    }
    p {
      font-size: 2rem;
      line-height: 3.2rem;
      color: $light-blue;
    }
    a,
    li {
      color: $light-blue;
      font-size: 2rem !important;
      line-height: 3.2rem !important;
    }
    a:hover {
      color: $white;
    }
  }

  &__video-wrap {
    iframe {
      width: 100%;
      height: calc(56.25vw - 3.2rem);
    }
    &[data-video-type='vimeo'] {
      iframe {
        height: 52.25vw;
      }
    }
  }
  &__video-poster {
    display: none;
  }
  &__player {
    display: none;
  }
  &__video-thumbnail {
    button {
      display: block;
      position: relative;
      border: none;
      background: transparent;
      cursor: pointer;
      width: 100%;
      &::after {
        content: '';
        background: url('./assets/images/video-play-btn-circle.svg');
        display: flex;
        width: 6.4rem;
        height: 6.4rem;
        position: absolute;
        left: calc(50% - 3.2rem);
        top: calc(50% - 3.2rem);
      }
      img {
        width: 100%;
        object-fit: cover;
      }
    }
  }
  &.efl-white {
    background-color: $white;
    padding: 0 3.2rem;
    .efl-large-video-player__content {
      h2 {
        color: $color-primary;
        &::after {
          border-bottom: 0.2rem solid $white;
        }
      }
      p {
        color: $color-interface-light;
      }
      a,
      li {
        color: $color-interface-light;
      }
      a:hover {
        color: $blue;
      }
    }
  }

  @media screen and (min-width: $mq-medium) {
    padding-top: 5.5rem;
    padding-bottom: 7.4rem;
    background-image: url('./assets/images/large-video-crop.png');
    background-repeat: no-repeat;
    background-position: left bottom;
    &__inner {
      width: 100%;
      height: 100%;
      flex-direction: column;
      max-width: 95.2rem;
      margin: 0 auto;
    }
    &__content {
      h2 {
        font-size: 2.8rem;
        line-height: 2.6rem;
      }
    }
    &__video-wrap {
      width: 100%;
      iframe {
        width: 100%;
        height: 53.55rem;
      }
      &[data-video-type='vimeo'] {
        iframe {
          height: 56.55rem;
        }
      }
    }
    &.efl-white {
      background-image: none;
      padding: 0 3.2rem;
    }
  }
}
  • URL: /components/raw/efl-large-video-player/efl-large-video-player.scss
  • Filesystem Path: src/library/components/efl-large-video-player/efl-large-video-player.scss
  • Size: 3.2 KB 
<section class="efl-large-video-player {{theme}}" data-behavior="efl-large-video-player">
  <div class="efl-large-video-player__inner">
    <div class="efl-large-video-player__content">
      <h2>{{title}}</h2>
      <p>{{copy}}</p>
      <a href="#">Hyperlink text to access the next page</a>

      <ul>
        <li>Lorem ipsum dolor sit amet, consectetur</li>
        <li>Lorem ipsum dolor sit amet, consectetur</li>
        <li>Lorem ipsum dolor sit amet, consectetur</li>
        <li>Lorem ipsum dolor sit amet, consectetur</li>
      </ul>
      <p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
    </div>
    <div class="efl-large-video-player__video-wrap" data-video-type="{{type}}" data-video-id="{{videoId}}"> 
      <div class="efl-large-video-player__video-poster">
          <img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy"/>
      </div>
      <div class="efl-large-video-player__video-thumbnail">
          <button tabindex="0" aria-label="{{title}} play in {{type}} video player">
            {{#unless no-thumbnail}}
              <img src="/assets/example-content/womens-hero.png" alt="" loading="lazy"/>
            {{/unless}}
          </button>
      </div>
      <div id="efl-large-video-player" class="efl-large-video-player__player"></div>
    </div>
  </div>
</section>