.card
  .card-play
  .card-video
    iframe#video(src="https://www.youtube.com/embed/JE9z-gy4De4?enablejsapi=1&html5=1&iv_load_policy=3&rel=0&showinfo=0", frameborder="0", allowfullscreen)

/* ------------ SETTINGS ------------ */

$card-image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1613479/inception.jpg';
$card-icon: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1613479/play.svg';

$white: #FFF;
$black: #000;

body {
  background: #121212;
}


/* ------------ CARD ------------ */

// Main
.card {
  width: 70vw;
  height: calc(9/16 * 70vw);
  max-width: calc(16/9 * 70vh);
  max-height: 70vh;
  display: flex;
  position: relative;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  background: url($card-image) center center / cover;
  overflow: hidden;
}
  
// Play icon
.card-play {
  width: 48px;
  height: 48px;
  position: relative;
  z-index: 1;
  margin: auto;
  opacity: 0;
  background: url($card-icon) center center / cover;
  cursor: pointer;
  transition: opacity .3s ease-out;
}

// Animation
.card-play:after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: $black;
  transition: all .5s ease-out;
}
  
  // Video
.card-video {
  display: none;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  z-index: 2;
  background: $black;

  iframe {
    width: 100%;
    height: 100%;
  }
}
  
// Shine effect
.card:after {
  content: '';
  width: 250%;
  height: 250%;
  position: absolute;
  top: var(--y);
  left: var(--x);
  transform: translate(-50%, -50%);
  opacity: 0;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, .3), transparent);
  transition: opacity 0.5s ease-out;
}


/* ------------ STATES ------------ */

.card:hover:after,
.card:hover .card-play {
  opacity: 1;
}

.video-is-open:after {
  display: none;
}

.video-is-open .card-play {
  opacity: 1;
  
  &:after {
    width: 2vh;
    height: 2vh;
    transform: translate(-50%, -50%) scale(16/9 * 50);
    transition: transform .5s ease-out;
  }
}

// Variables
var player,
    card  = document.querySelector( '.card' ),
    play  = document.querySelector( '.card-play' ),
    video = document.querySelector( '.card-video' );


// Shine effect
card.onmousemove = function (e) {
  const x = e.pageX - card.offsetLeft;
  const y = e.pageY - card.offsetTop;

  card.style.setProperty( '--x', x + 'px' );
  card.style.setProperty( '--y', y + 'px' );
}


// Youtube API
function onYouTubePlayerAPIReady() {
  player = new YT.Player('video', {
    events: {
      'onReady': onPlayerReady
    }
  });
}


// Player Ready
function onPlayerReady(event) {
  play.addEventListener( 'click', function() {
    card.classList.add( 'video-is-open' );
    setTimeout(function() {
      video.style.display = 'block';
      player.playVideo();
    }, 500);
  });
}


// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);