Autoplay Hero Video: Shallow Hero Youtube

Ready

HTML
Notes
Context
Assets
View
Info


        
        <div class="autoplay-hero-video shallow" data-behavior="autoplay-hero-video" data-video-type="youtube" data-video-id="ufLSGCZEPrg">
        <div class="autoplay-hero-video__player-wrap">
            <div id=0 class="vimeo-video-player"></div>
            <img src="/assets/example-content/autoplay-hero-error.png" />
        </div>
        <div class="control-overlay">
            <div class="play-pause-controls">
                <a class="play-pause-controls__play hidden" role="video play" aria-label="video play" tabindex="0" aria-selected="true"></a>
                <a class="play-pause-controls__pause" role="video pause button" aria-label="video pause button play" tabindex="0" aria-selected="true"></a>
            </div>
            <div class="mute-unmute-controls">
                <a class="mute-unmute-controls__mute hidden" role="mute" aria-label="mute" aria-selected="true" tabindex="0"></a>
                <a class="mute-unmute-controls__unmute" role="unmute button" aria-label="it isunmute pleasemute" tabindex="0" aria-selected="true"></a>
            </div>
        </div>
        <div class="autoplay-hero-video__gradient"></div>
        <div class="autoplay-hero-video__overlay">
            <h1>The home of football learning</h1>
            <a href="/" class="cta cta--primary  " id="find-your-pathway" name="find your pathway" tabindex="0">Find Your Pathway</a>

        </div>
    </div>

No notes defined.


        
            
            {
  "shallow": true,
  "videoId": "ufLSGCZEPrg",
  "type": "youtube",
  "id": "0",
  "title": "The home of football learning",
  "find-your-pathway-cta": {
    "id": "find-your-pathway",
    "copy": "Find Your Pathway",
    "name": "find your pathway"
  }
}

File:

Content:


                                import Player from '@vimeo/player';
import { loadYouTubeApi } from '../video/video';

export default parentElement => {
  const { videoId, videoType } = parentElement.dataset;
  const videoPlayerId = parentElement
    .querySelector('.vimeo-video-player')
    .getAttribute('id');
  const playButton = parentElement.querySelector('.play-pause-controls__play');
  const muteButton = parentElement.querySelector('.mute-unmute-controls__mute');
  const pauseButton = parentElement.querySelector(
    '.play-pause-controls__pause'
  );
  const unmuteButton = parentElement.querySelector(
    '.mute-unmute-controls__unmute'
  );

  // eslint-disable-next-line no-unused-vars
  let videoPlayer;

  if (!videoId) {
    return;
  }

  const resizeVideo = () => {
    const fixedHeader = document.querySelector('.fixed-header');
    const globalFixedHeader = document.querySelector('.global-fixed-header');
    let headerHeight = 0;

    if (fixedHeader) {
      headerHeight = fixedHeader.offsetHeight;
    } else if (globalFixedHeader) {
      headerHeight = globalFixedHeader.offsetHeight;
    }

    const screenWidth = document.getElementsByTagName('body')[0].clientWidth;
    const screenHeight = window.innerHeight - headerHeight;
    const playerWidth = screenHeight * (16 / 9);

    if (playerWidth < screenWidth && parentElement.querySelector('iframe')) {
      const playerHeight = screenWidth * (9 / 16);
      const PlayerWidth = screenWidth;

      // eslint-disable-next-line no-param-reassign
      parentElement.querySelector('iframe').style.height = `${playerHeight}px`;
      // eslint-disable-next-line no-param-reassign
      parentElement.querySelector('iframe').style.width = `${PlayerWidth}px`;
    }
  };

  const onPlayerError = () => {
    parentElement.classList.remove('vimeo-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('vimeo-player-loaded');
    resizeVideo();
  };

  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('vimeo-player-loaded');
        // The video is loadded
        resizeVideo();
      })
      .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('vimeo-player-loaded');
    });
  }
  playButton.addEventListener('click', () => {
    if (videoType === 'youtube') {
      videoPlayer.playVideo();
    } else {
      videoPlayer.play();
    }
    playButton.classList.toggle('hidden');
    pauseButton.classList.toggle('hidden');
  });
  playButton.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      playButton.click();
    }
  });
  pauseButton.addEventListener('click', () => {
    if (videoType === 'youtube') {
      videoPlayer.pauseVideo();
    } else {
      videoPlayer.pause();
    }
    playButton.classList.toggle('hidden');
    pauseButton.classList.toggle('hidden');
  });
  pauseButton.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      pauseButton.click();
    }
  });
  muteButton.addEventListener('click', () => {
    if (videoType === 'youtube') {
      videoPlayer.mute();
    } else {
      videoPlayer.setMuted(1);
    }
    muteButton.classList.toggle('hidden');
    unmuteButton.classList.toggle('hidden');
  });
  muteButton.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      muteButton.click();
    }
  });
  unmuteButton.addEventListener('click', () => {
    if (videoType === 'youtube') {
      videoPlayer.unMute();
    } else {
      videoPlayer.setMuted(0);
    }
    muteButton.classList.toggle('hidden');
    unmuteButton.classList.toggle('hidden');
  });
  unmuteButton.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      unmuteButton.click();
    }
  });
  if (window.innerWidth < 820) {
    parentElement
      .querySelector('.autoplay-hero-video__gradient')
      .addEventListener('click', () => {
        if (
          window
            .getComputedStyle(parentElement.querySelector('.control-overlay'))
            .getPropertyValue('opacity') === '1'
        ) {
          // eslint-disable-next-line no-param-reassign
          parentElement.querySelector('.control-overlay').style.opacity = '0';
          // eslint-disable-next-line no-param-reassign
          parentElement.querySelector(
            '.autoplay-hero-video__gradient'
          ).style.opacity = '0';
        } else {
          // eslint-disable-next-line no-param-reassign
          parentElement.querySelector('.control-overlay').style.opacity = '1';
          // eslint-disable-next-line no-param-reassign
          parentElement.querySelector(
            '.autoplay-hero-video__gradient'
          ).style.opacity = '1';
        }
      });
  }
  window.addEventListener('resize', () => resizeVideo());
};

URL: /components/raw/autoplay-hero-video/autoplay-hero-video.js
Filesystem Path: src/library/components/autoplay-hero-video/autoplay-hero-video.js
Size: 6.5 KB

Content:


                                .autoplay-hero-video {
  position: relative;
  width: 100%;
  height: 37.5rem;
  &__player-wrap {
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;

    iframe {
      /* object-fit: cover; */
      width: 177.77%;
      height: 100vw !important;
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      pointer-events: none;
      .player {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
      }
    }
    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
    .vimeo-video-player {
      display: none;
    }
  }

  @mixin transition($params) {
    -webkit-transition: $params;
    -moz-transition: $params;
    -khtml-transition: $params;
    -o-transition: $params;
    transition: $params;
  }

  .control-overlay {
    position: absolute;
    bottom: 3.5rem;
    z-index: 14;
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    min-height: 4rem;
    display: none;
    a {
      display: inline-block;
    }
    a.hidden {
      display: none;
    }
    .play-pause-controls {
      float: left;
      margin-left: 4.2rem;
      &__play {
        background: url(./assets/images/video-play-button.svg) no-repeat center;
        width: 2.5rem;
        height: 2.9rem;
        background-size: 100%;

        @include transition(transform 0.3s ease-in-out);
        &:hover {
          transform: scale(1.2);
        }
        &:active {
          transform: scale(1.2);
        }
      }
      &__pause {
        background: url(./assets/images/video-pause-button.svg) no-repeat center;
        width: 1.9rem;
        height: 3.4rem;
        background-size: 100%;

        @include transition(transform 0.3s ease-in-out);
        &:hover {
          transform: scale(1.2);
        }
        &:active {
          transform: scale(1.2);
        }
      }
    }
    .mute-unmute-controls {
      float: right;
      margin-right: 3.2rem;
      &__mute {
        background: url(./assets/images/video-sound-on.svg) no-repeat 3px center;
        width: 4.4rem;
        height: 3.2rem;
        background-size: 100%;

        @include transition(transform 0.3s ease-in-out);
        &:hover {
          transform: scale(1.2);
        }
        &:active {
          transform: scale(1.2);
        }
      }
      &__unmute {
        background: url(./assets/images/video-sound-off.svg) no-repeat center;
        width: 4.2rem;
        height: 3.1rem;
        background-size: 100%;

        @include transition(transform 0.3s ease-in-out);
        &:hover {
          transform: scale(1.2);
        }
        &:active {
          transform: scale(1.2);
        }
      }
    }
  }
  &__overlay {
    h1 {
      font: $efl-heading-1-hp;
      color: $white;
      text-align: center;
      margin-bottom: 1.6rem;
      max-width: calc(100vw - 3.2rem);
      white-space: normal;
      line-height: 3rem;
      pointer-events: none;

      @include text-limit(2);
    }

    .cta {
      width: 100%;
      max-width: 28.3rem;
      min-height: 4.8rem;
      font-size: 1.6rem;
      line-height: 3.1rem;
    }

    .cta[name='find your pathway'] {
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid #fff;
      box-sizing: border-box;
      border-radius: 2px;
      &:hover {
        background-color: #fff;
        // TBA
      }
    }

    position: absolute;
    z-index: 13;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2.4rem;
  }
  &__gradient {
    bottom: 0;
    content: '';
    height: 100%;
    top: 0;
    width: 100%;
    position: absolute;
    z-index: 11;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: none;
    &::after {
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 45.31%,
        rgba(1, 30, 65, 0.204) 68.68%,
        rgba(1, 30, 65, 0.6) 94.79%
      );
      bottom: 0;
      content: '';
      display: block;
      height: 100%;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }
  &.vimeo-player-loaded {
    .autoplay-hero-video__player-wrap {
      .vimeo-video-player {
        display: block;
      }
      img {
        display: none;
      }
    }
    .control-overlay {
      display: block;
    }
    .autoplay-hero-video__gradient {
      display: block;
    }
  }
  &.shallow {
    height: 36.4rem !important;
    background-color: rgba(1, 30, 65, 0.3);
  }

  @media screen and (min-width: $mq-small) and (max-width: $mq-medium) {
    height: 54rem;
    h1 {
      font-size: 4.4rem;
    }
  }

  @media screen and (max-width: $mq-medium) and (orientation: portrait) {
    iframe {
      height: 100vh !important;
      width: 177.77vh;
    }
  }

  @media screen and (min-width: $mq-medium) and (orientation: portrait) {
    iframe {
      height: 100vh;
      width: 177.77vh;
    }
  }

  @media screen and (min-width: $mq-medium) {
    h1 {
      max-width: calc(100vw - 47rem);
      line-height: 5.8rem;
    }

    height: 42.8rem;
    .cta[name='find your pathway'] {
      width: 100%;
      max-width: 31.1rem;
    }

    &.vimeo-player-loaded:hover {
      .control-overlay {
        opacity: 1;
      }
      .autoplay-hero-video__gradient {
        opacity: 1;
      }
    }
    /* stylelint-disable no-descending-specificity */
    &.shallow {
      height: 43.6rem !important;

      iframe {
        width: 1100px !important;
        height: calc(1100px * 0.5625) !important;
      }
      .control-overlay {
        width: 960px;
        margin: 0 auto;
        left: 0;
        right: 0;
      }
    }
  }

  @media screen and (min-width: 820px) and (max-width: 980px) {
    .control-overlay {
      width: 100% !important;
    }
  }

  @media screen and (min-width: 1100px) {
    &.shallow {
      .autoplay-hero-video__textoverlay {
        width: 1100px !important;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
  }
}

.fixed-banner {
  .autoplay-hero-video {
    position: fixed;
    top: 64px;
    height: 59rem;

    @media screen and (min-width: $mq-medium) {
      top: 81px;
      height: 54rem;
    }

    @media screen and (min-width: 820px) and (max-width: 980px) {
      height: 44rem;
    }

    @media screen and (min-width: 1440px) {
      height: 64rem;
    }
  }
}

.shallow-banner {
  max-height: 36.4rem !important;

  @media screen and (min-width: $mq-medium) {
    max-height: 43.6rem !important;
  }
}

URL: /components/raw/autoplay-hero-video/autoplay-hero-video.scss
Filesystem Path: src/library/components/autoplay-hero-video/autoplay-hero-video.scss
Size: 7 KB


        <div class="autoplay-hero-video {{#if shallow}}shallow{{/if}}" data-behavior="autoplay-hero-video" data-video-type="{{type}}" data-video-id="{{videoId}}">
        <div class="autoplay-hero-video__player-wrap">
            <div id={{id}} class="vimeo-video-player"></div>
            <img src="/assets/example-content/autoplay-hero-error.png" />
        </div>
        <div class="control-overlay">
            <div class="play-pause-controls">
                <a class="play-pause-controls__play hidden" role="video play" aria-label="video play" tabindex="0" aria-selected="true"></a>
                <a class="play-pause-controls__pause" role="video pause button" aria-label="video pause button play" tabindex="0" aria-selected="true"></a>
            </div>
            <div class="mute-unmute-controls">
                <a class="mute-unmute-controls__mute hidden" role="mute" aria-label="mute" aria-selected="true" tabindex="0"></a>
                <a class="mute-unmute-controls__unmute" role="unmute button" aria-label="it isunmute pleasemute" tabindex="0" aria-selected="true"></a>
            </div>
        </div>
        <div class="autoplay-hero-video__gradient"></div>
        <div class="autoplay-hero-video__overlay">
            <h1>{{title}}</h1>
            {{render '@cta' find-your-pathway-cta merge="true"}}
        </div>
    </div>

Handle: @autoplay-hero-video--shallow-hero---youtube
Variants (4): Default , Youtube Video , Shallow Hero Vimeo , Shallow Hero Youtube
Preview:
- With layout
- Component only
Filesystem Path: src/library/components/autoplay-hero-video/autoplay-hero-video.hbs
References (1): @cta