Youtube iframe player (inline)(API)

by turbographics2000

HTML

<script src="https://www.youtube.com/player_api"></script>
<div id="ytplayer"></div>
<div id="btnPlayCover">
	<div id="btnPlay"></div>
</div>

CSS

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
}
#btnPlayCover{ 
	position:absolute;
	left: 0;
	top: 0;
	width:640px;
	height:360px;
	pointer-events: none;
	background-color: white;
	transition: opacity 0.2s linear;
}
#btnPlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 300px;
	height: 300px;
	margin:auto;
	background: url('data:image/svg+xml,%3Csvg%20fill%3D%22%23000000%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M10%2016.5l6-4.5-6-4.5v9zM12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208z%22%2F%3E%0A%3C%2Fsvg%3E') no-repeat center;	
	background-size: contain;
}

JavaScript

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
tag.onload = setupPlayer;
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function setupPlayer() {
	var player = new YT.Player('ytplayer', {
		height: '360',
		width: '640',
		videoId: '3tb-1MWg44Y',
		playsinline: 1,
		playerVars: { playsinline: 1 },
		events: {
			onStateChange: onStateChange
		}
	});
}

function onStateChange(evt) {
	if(evt.data === YT.PlayerState.PLAYING) {
		btnPlayCover.style.opacity = 0;
	}
}