Youtube play on click image

youtube.js

var i,c,y,v,s,n;
v = document.getElementsByClassName("youtube");
if(v.length>0){
	s = document.createElement("style");
	s.type="text/css";
	s.innerHTML='.youtube{background-color:#000; max-width:100%;overflow:hidden;position:relative;cursor:hand;cursor:pointer}.youtube .ythumb{bottom:0;display:block;left:0;margin:auto;padding:0;max-width:100%;position:absolute;right:0;top:0;width:100%;height:auto}.youtube .play{filter:alpha(opacity=80);opacity:.8;left:50%;margin-left:-38px;margin-top:-38px;position:absolute;top:50%;width:77px;height:77px;background:url(http://lh6.googleusercontent.com/-KM0uGaLlhKc/UznnNWfT-wI/AAAAAAAAKS0/Nnz3WwdoLxk/s77/play.png) no-repeat}';

	document.body.appendChild(s)}

	for(n = 0; n < v.length; n++){
		y = v[n];
		i = document.createElement("img");
		i.setAttribute("src","http://i.ytimg.com/vi/"+y.id+"/hqdefault.jpg");
		i.setAttribute("class","ythumb");
		c = document.createElement("div");
		c.setAttribute("class","play");
		y.appendChild(i);
		y.appendChild(c);
		y.onclick = function(){
			var a = document.createElement("iframe");
			a.setAttribute("src","https://www.youtube.com/embed/"+this.id+"?autoplay=1&autohide=1&border=0&wmode=opaque&enablejsapi=1");
			a.style.width=this.style.width;
			a.style.height=this.style.height;
			a.style.margin=this.style.margin;
			a.style.border=this.style.border;
	a.style.display=this.style.display;
	this.parentNode.replaceChild(a,this)
	}
};
             
/**
 * HTML
 */
<div class="youtube" id="XXXXXXXX" style="width:560px; height:315px; margin:0 auto; display:block; border:none"></div>