England Football

Get Started Intro 

<div class="get-started-content get-started-intro" data-page="get-started-intro" data-behavior="get-started-intro" data-video-type="youtube" data-video-id="ufLSGCZEPrg">
    <div class="get-started-intro__wrapper">
        <div class="get-started-intro__player-wrap">
            <div id=0 class="intro-video-player"></div>
            <img src="/assets/example-content/get-started-intro-image.jpg" />
        </div>
        <div class="get-started-intro__overlay">
            <h2>Get ready to play your part in the greatest game on Earth</h2>
            <p>Watch our introduction to England Football Learning video, or scroll down to find out how we can support you learning journey</p>
            <a href="/" class="cta cta--primary  play-video" id="play-video" tabindex="0">Play Video</a>

        </div>
        <div class="get-started-intro__hero-video">
            <div class="get-started-video" data-behavior="get-started-video" data-video-type="youtube" data-video-id="R7qSx1Zb-NQ">
                <div class="get-started-video__player-wrap">
                    <div id=intro class="get-start-video"></div>
                </div>
                <div class="get-started-video__control-overlay">
                    <a class="full-screen" href="#" role="full screen" aria-label="video full screen" tabindex="0"></a>
                    <a class="close-video" href="#" role="close video" aria-label="video close" tabindex="0"></a>
                    <div class="play-pause-controls">
                        <a class="play-pause-controls__play hidden" role="video play" aria-label="video play button" tabindex="0" aria-selected="true"></a>
                        <a class="play-pause-controls__pause" role="video pause button" aria-label="video pause button" tabindex="0" aria-selected="true"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

No notes defined.

{
  "videoId": "ufLSGCZEPrg",
  "type": "youtube",
  "id": "0",
  "title": "Get ready to play your part in the greatest game on Earth",
  "copy": "Watch our introduction to England Football Learning video, or scroll down to find out how we can support you learning journey",
  "play-video-cta": {
    "id": "play-video",
    "copy": "Play Video",
    "additionalClass": "play-video"
  }
}
  • Content: 
    import { gsap } from 'gsap';
import Player from '@vimeo/player';
import { loadYouTubeApi } from '../video/video';

export default parentElement => {
  const { videoId, videoType } = parentElement.dataset;
  const videoPlayerId = parentElement
    .querySelector('.intro-video-player')
    .getAttribute('id');
  const getStartedVideoYT = parentElement.querySelector(
    '[data-behavior="get-started-video"]'
  );
  const playVideoCta = parentElement.querySelector('.play-video');
  const introOverlay = parentElement.querySelector(
    '.get-started-intro__overlay'
  );
  const introOverlayText1 = parentElement.querySelector(
    '.get-started-intro__overlay h2'
  );
  const introOverlayText2 = parentElement.querySelector(
    '.get-started-intro__overlay p'
  );
  const introOverlayCta = parentElement.querySelector(
    '.get-started-intro__overlay a'
  );
  const introVideo = parentElement.querySelector(
    '.get-started-intro__hero-video'
  );
  const closeVideo = parentElement.querySelector('.close-video');
  // eslint-disable-next-line no-unused-vars
  let videoPlayer;

  if (!videoId) {
    return;
  }

  const onPlayerError = () => {
    parentElement.classList.remove('intro-player-loaded');
  };

  const onPlayerStateChange = event => {
    if (event.data === window.YT.PlayerState.ENDED) {
      videoPlayer.playVideo();
    }
  };

  const onPlayerReady = () => {
    // To capture error on video
    videoPlayer.playVideo();
    videoPlayer.mute();
    parentElement.classList.add('intro-player-loaded');
  };

  const initVideo = () => {
    videoPlayer = new window.YT.Player(videoPlayerId, {
      height: '390',
      width: '640',
      videoId,
      playerVars: {
        autoplay: 1,
        playsinline: 1,
        controls: 0,
        loop: 1,
      },
      events: {
        onReady: onPlayerReady,
        onError: onPlayerError,
        onStateChange: onPlayerStateChange,
      },
    });
  };

  if (videoType === 'youtube') {
    if (
      window.YouTubeIframeApiReady === undefined ||
      window.YouTubeIframeApiReady === false
    ) {
      loadYouTubeApi();
      window.onYouTubeIframeAPIReady = () => {
        window.YouTubeIframeApiReady = true;
        initVideo();
      };
    } else {
      initVideo();
    }
  } else {
    // eslint-disable-next-line no-undef
    videoPlayer = new Player(videoPlayerId, {
      id: videoId,
      autoplay: 1,
      muted: 1,
      title: 0,
      sidedock: 0,
      controls: 0,
      loop: 1,
      quality: 'auto',
      width: '100%',
      height: '100%',
    });

    videoPlayer
      .play()
      .then(() => {
        parentElement.classList.add('intro-player-loaded');
      })
      .catch(error => {
        // eslint-disable-next-line no-console
        console.log(error);
      });

    videoPlayer.on('loaded', () => {
      // eslint-disable-next-line no-console
      console.log('vimeo loaded');
      parentElement.classList.add('intro-player-loaded');
    });
  }

  if (
    videoType === 'youtube' &&
    getStartedVideoYT.getAttribute('data-video-type') === 'youtube'
  ) {
    const getStartedTime = setInterval(() => {
      if (window.YouTubeIframeApiReady === true) {
        initVideo();
        clearInterval(getStartedTime);
      }
    }, 50);
  }

  playVideoCta.addEventListener('click', e => {
    e.preventDefault();

    if (videoType === 'youtube') {
      videoPlayer.pauseVideo();
    } else {
      videoPlayer.pause();
    }

    parentElement.classList.add('video-played');
    introOverlay.classList.add('intro-content');
    introVideo.classList.add('popup-video');
  });

  closeVideo.addEventListener('click', e => {
    e.preventDefault();

    if (videoType === 'youtube') {
      videoPlayer.stopVideo();
    } else {
      videoPlayer.stop();
    }

    parentElement.classList.remove('video-played');
    introOverlay.classList.remove('intro-content');
    introVideo.classList.remove('popup-video');
  });

  gsap.set(introOverlay, { x: 0, ease: 'none' });
  gsap.set(introOverlayText1, { scale: 1, opacity: 1, ease: 'none' });
  gsap.set(introOverlayText2, { scale: 1, opacity: 1, ease: 'none' });
  gsap.set(introOverlayCta, { scale: 1, opacity: 1, ease: 'none' });
};
  • URL: /components/raw/get-started-intro/get-started-intro.js
  • Filesystem Path: src/library/components/get-started-intro/get-started-intro.js
  • Size: 4.2 KB
  • Content: 
    .get-started-intro {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  transform: translateY(0);
  transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
  &::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 7;
    // background: url('./assets/images/get-started-left-shape-mob.png') no-repeat
    //   center;
    background-size: contain;
    width: 37rem;
    height: 50rem;
    top: -0.8rem;
    left: 0;
    pointer-events: none;
    transform: translateY(0);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  &::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 7;
    // background: url('./assets/images/get-started-right-shape-mob.png') no-repeat
    //   center;
    background-size: contain;
    width: 37rem;
    height: 50rem;
    bottom: 0;
    right: 0;
    pointer-events: none;
    transform: translateY(0);
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  &__wrapper {
    width: 100%;
    height: 100vh;
  }
  &__player-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    .intro-video-player {
      height: 100vh;
      width: 177.77vh;
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      pointer-events: none;
      iframe {
        width: 100%;
        height: 100%;
      }
      .player {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
      }
    }
    .vimeo-video-player {
      display: none;
    }
  }
  &__overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2.4rem;
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    &::before {
      content: '';
      display: block;
      position: absolute;
      z-index: 5;
      background: linear-gradient(
        180deg,
        rgba(29, 29, 27, 0.1) 0%,
        rgba(29, 29, 27, 0.35) 100%
      );
      width: 100%;
      height: 100%;
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      z-index: 4;
      background: linear-gradient(
        179.45deg,
        rgba(29, 29, 27, 0.1) 57.11%,
        rgba(29, 29, 27, 0.35) 92.98%
      );
      width: 100%;
      height: 100%;
    }

    &.intro-content {
      opacity: 0;
      transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    h2 {
      max-width: 100%;
      text-align: center;
      white-space: normal;
      color: $white;
      margin-bottom: 0.8rem;
      z-index: 6;

      @extend .efl-heading-1;
    }
    p {
      max-width: 100%;
      line-height: 2.4rem;
      text-align: center;
      letter-spacing: 0.02em;
      color: $white;
      margin-bottom: 1.6rem;
      z-index: 6;

      @extend .efl-p-2;
    }
    .play-video {
      background: rgba(255, 255, 255, 0.1);
      border: 0.2rem solid $white;
      box-sizing: border-box;
      border-radius: 0.2rem;
      width: 100%;
      max-width: 31.1rem;
      z-index: 6;
      &:hover {
        background-color: $white;
      }
    }
  }
  &__hero-video {
    position: relative;
    z-index: 8;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translateY(100%);
    transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
    &.popup-video {
      transform: translateY(0);
      transition: transform 3s cubic-bezier(0.16, 1, 0.3, 1);
    }
  }
  &.intro-player-loaded {
    .get-started-intro__player-wrap {
      .vimeo-video-player {
        display: block;
      }
      img {
        display: none;
      }
    }
  }
  &.video-played {
    &::before {
      transform: translateY(-100%);
      transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    &::after {
      transform: translateY(100%);
      transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .get-started-intro__wrapper {
      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: $black;
        opacity: 0.7;
        z-index: 1;
      }
    }
  }
  .get-started-next-prev-cta {
    display: flex;
    position: absolute;
    bottom: 14.4rem;
    width: 100%;
    height: 3.2rem;
    flex-direction: row;
    justify-content: flex-end;
  }
  .next-step {
    display: flex;
    position: relative;
    bottom: 0;
    right: 6rem;
    width: 15.8rem;
    height: 3.2rem;
    z-index: 9;
    cursor: pointer;
  }

  @media screen and (max-width: 768px) and (orientation: portrait) {
    .intro-video-player {
      height: 100vh !important;
      width: 177.77vh;
    }
  }

  @media screen and (min-width: 768px) and (orientation: portrait) {
    .intro-video-player {
      height: 100vh;
      width: 177.77vh;
    }
  }

  @media screen and (min-width: 768px) {
    &::before {
      // background: url('./assets/images/get-started-left-shape.png') no-repeat
      //   center;
      width: 73rem;
      height: 79rem;
    }
    &::after {
      // background: url('./assets/images/get-started-right-shape.png') no-repeat
      //   center;
      width: 115rem;
      height: 79rem;
    }
    &__player-wrap {
      .intro-video-player {
        height: 150rem;
        width: 350vh;
      }
    }
    &__overlay {
      h2 {
        max-width: 54rem;
        font-size: 5.2rem;
        line-height: 5.8rem;
      }
      p {
        max-width: 51.2rem;
        line-height: 3.2rem;
      }
    }
  }
}
  • URL: /components/raw/get-started-intro/get-started-intro.scss
  • Filesystem Path: src/library/components/get-started-intro/get-started-intro.scss
  • Size: 6.1 KB 
<div class="get-started-content get-started-intro" data-page="get-started-intro" data-behavior="get-started-intro" data-video-type="{{type}}"
    data-video-id="{{videoId}}">
    <div class="get-started-intro__wrapper">
        <div class="get-started-intro__player-wrap">
            <div id={{id}} class="intro-video-player"></div>
            <img src="/assets/example-content/get-started-intro-image.jpg" />
        </div>
        <div class="get-started-intro__overlay">
            <h2>{{title}}</h2>
            <p>{{copy}}</p>
            {{render '@cta' play-video-cta merge="true"}}
        </div>
        <div class="get-started-intro__hero-video">
            {{render '@get-started-video'}}
        </div>
    </div>
</div>