Simple Youtube Audio Player

by Spencer Smith

HTML

<input placeholder="YouTube Video ID">
<div class="thumb"></div>

<div class="controls hidden">
	<div class="play button hidden"></div>
	<div class="pause button"></div>
	<div class="stop button"></div>
</div>

<div class="hidden"><iframe></iframe></div>

CSS

body{
	text-align: center;
}
.button{
	display: inline-block;
	margin: 10px;
	opacity: .5;
	cursor: pointer;
	transition: .1s all;
	}
.play{
	width: 0;
	height: 0;
	border-left:20px solid;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	margin: 10px 12px;
}
.pause{
	height: 30px;
	width: 4px;
	border-left: 10px solid;
	border-right: 10px solid;
}
.stop{
	width: 30px;
	height: 30px;
	background-color: black;
}
.button:hover{
	opacity: .7;
}
input{
	padding: 8px;
	font-size: 20px;
	margin: 20px;
	margin-bottom: 0;
	width: 200px;
	box-sizing: border-box;
	outline: none !important;
	border: none;
}
.thumb{
	width: 200px;
	height: 50px;
	background-color: lightgray;
	margin: 0 auto;
	margin-bottom: 20px;
	background-size: cover;
	background-position: center;
}
.hidden{
	display: none;
}

JavaScript

var iframe = document.getElementsByTagName("iframe")[0].contentWindow;

function play(){
	iframe.postMessage('{"event":"command","func":"'+'playVideo'+   '","args":""}', '*');
	$(".pause").css("display", "inline-block");
	$(".play").hide();
}

function pause(){
	iframe.postMessage('{"event":"command","func":"'+'pauseVideo'+   '","args":""}', '*');
	$(".pause").hide();
	$(".play").css("display", "inline-block");
}

function stop(){
	iframe.postMessage('{"event":"command","func":"'+'stopVideo'+   '","args":""}', '*');
	$(".pause").hide();
	$(".play").show();
}

$(".play").click(play);
$(".pause").click(pause);
$(".stop").click(stop);

function load(id){
	$('.thumb').css("background-image", "url('http://img.youtube.com/vi/" + id + "/0.jpg')");
	$('iframe').attr("src", "https://www.youtube.com/embed/" + id + "?enablejsapi=1&autoplay=1");
	$('.controls').show();
	//$(".pause").css("display", "inline-block");
}
$in = $('input').eq(0);
$in.keypress(function(e){
	if(e.which == 13){
		//reset();
		load($in.val());
	}
});

function reset(){
	$(".play").show();
	$(".pause").hide();
}

// Load video when play is pressed if not already loaded from input