Youtube card

index.pug

.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)

script.js

// 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);

style.scss

/* ------------ 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;
	}
}

styles

<link href="https://codepen.io/VeronQ/pen/6d36d66998194acf3c6cc2e896401b60" rel="stylesheet" />

youtube-card.markdown

Youtube card

Video animation

A Pen by Quentin Veron on CodePen.

License.