.clickable-yt {
	display: block;
	margin: 1em auto;
	position: relative;
	height: 0;
	overflow: hidden;
	padding-top: 56%;
}

.clickable-yt > * {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}


.clickable-yt > .clickable-yt-control {
	width: 50px;
	height: 50px;
	z-index: 10;
	left: 50%;
	top: 50%;
	margin: -25px 0 0 -25px;
	background: rgba(255, 255, 255, .5);
	border-radius: 15px;
	transition:all 0.3s ease;
	box-shadow:0 0 15px rgba(0, 0, 0, .3);
}

.clickable-yt:hover > .clickable-yt-control {
	background: rgba(255, 255, 255, 8);
}


.clickable-yt-control:before {
	content: "";
	border:0 solid transparent;
	border-width: 10px 15px;
	border-left-color: #000;
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-top: -10px;
	margin-left: -5px;
}