Youtube Video Hero

hero.php

<section class="hero">
	<div class="hero--video clearfix">
		<div class="inner-hero-video">
			<div id="wrapperVideoBanner" class="wrapper-video--banner video-wrapper videoWrapper169">
				<iframe  class="video-iframe" width="1920" height="1080" src="" frameborder="0" allowTransparency="true" allowfullscreen data-src="https://www.youtube.com/embed/[videoid]?autoplay=1&amp;showinfo=0"></iframe>
				<!-- the poster frame - in the form of a button to make it keyboard accessible -->
				<button id="videoPlay" class="video-poster" style="background-image:url( <?php echo get_template_directory_uri() . '/assets/images/placeholders/test.jpg' ?>);">Play video</button>
				<button id="videoStop">Stop video</button>
			</div>
		</div>
	</div>
</section>

script.js

// This load the youtube video on click on the poster
export function loadVideoOnClick() {
  // poster frame click event
  $(document).on('click', '#videoPlay', function(ev) {
    ev.preventDefault();
    var $poster = $(this);
    var $wrapper = $poster.closest('.video-wrapper');
    videoPlay($wrapper);
    // console.log($(this));
  });
  $(document).on('click', '.video-wrapper-active', function(ev) {
    ev.preventDefault();
    videoStop();
    console.log('#videoStop');
  });
}

// play the targeted video (and hide the poster frame)
function videoPlay($wrapper) {
  var $iframe = $wrapper.find('.video-iframe');
  var src = $iframe.data('src');
  // hide poster
  $wrapper.addClass('video-wrapper-active');
  // add iframe src in, starting the video
  $iframe.attr('src', src);
}


// stop the targeted/all videos (and re-instate the poster frames)
export function videoStop() {
  $('#wrapperVideoBanner').removeClass('video-wrapper-active');
  // remove youtube link, stopping the video from playing in the background
  $('.video-iframe').attr('src','');
}

style.scss

$banner-play-button-background: $primary-color;
$banner-play-button-background-hover: $secondary-color;
$banner-play-button-box-shadow: 0 0 1px 0 rgba(80, 85, 103, 0.39),0 7px 9px 0 rgba(94, 94, 94, 0.18);
$banner-play-button-size: 5rem;
$banner-play-button-background-size: 40%;
$banner-play-button-background-position: 55% center;
$banner-play-button-color: $white;
$banner-play-button-image: url('assets/images/graphics/icone-play.svg');
$hero-bg-color: $light-gray;

.hero--video {
  height: 50vh;
  width: 100vw;
  background-color: $hero-bg-color;

  @include breakpoint(medium) {
    height: 100vh;
  }
}

.inner-hero-video {
  position: relative;
  height: 56.25vw;
}

.button--play--banner {
  position: absolute;
  left: 50%;
  margin-left: -2.5rem;
  top: 50%;
  margin-top: -2.5rem;
}

.wrapper-video--banner {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  iframe {
    width: 100%;
    height: 100%;
  }
}

.video-poster {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background-color: $hero-bg-color;
  background-position: 100% 50%;
  background-size: 100%;
  background-repeat: no-repeat;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 800ms, height 0s;
  -moz-transition: opacity 800ms, height 0s;
  transition: opacity 800ms, height 0s;
  -webkit-transition-delay: 0s, 0s;
  -moz-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;

  @include breakpoint(medium) {
    background-position: 50% 50%;
    background-size: 60%;
  }

  @include breakpoint(large) {
    background-size: 50%;
  }

  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: $banner-play-button-size;
    height: $banner-play-button-size;
    display: block;
    margin: -$banner-play-button-size/2 0 -$banner-play-button-size/2 0;
    border-radius: 50%;
    box-shadow: $banner-play-button-box-shadow;
    background-color: $banner-play-button-background;
    background-image: $banner-play-button-image;
    background-size: $banner-play-button-background-size;
    background-repeat: no-repeat;
    background-position: $banner-play-button-background-position;
    cursor: pointer;
    transition: 0.4s all ease-in-out;
    border: 3px solid transparent;
  }

  &:hover {
    &::before {
      // background-color: $banner-play-button-background-hover;
      // border-color: $banner-play-button-background-hover;
      // transform: scale(1.1);
    }
  }
}

.video-wrapper-active {
  .video-poster {
    opacity: 0;
    height: 0;
    -webkit-transition-delay: 0s, 800ms;
    -moz-transition-delay: 0s, 800ms;
    transition-delay: 0s, 800ms;
  }
}

#videoStop {
  position: absolute;
  display: none;
  top: 0;
  bottom: 5rem;
  right: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  overflow: hidden;
  text-indent: -9999px;

  .video-wrapper-active & {
    display: block;
  }

  // this class is added by assets/scripts/util/detectTouch.js
  // lets not prevent touch users from playing video on their device ;)
  .user-is-touching & {
    display: none !important;
  }
}