document.addEventListener("DOMContentLoaded", function() {
    var div, n, v = document.getElementsByClassName("youtube-player");
    for (n = 0; n < v.length; n++) {
        div = document.createElement("div");
        div.setAttribute("data-id", v[n].dataset.id);
	var style_string = '';
	
	if (typeof v[n].dataset.width != 'undefined') {
		div.setAttribute("data-width", v[n].dataset.width);
		style_string += "width: "+v[n].dataset.width+"px; ";
	}
	
        if (typeof v[n].dataset.height != 'undefined') {
		div.setAttribute("data-height", v[n].dataset.height);
		style_string += "height: "+v[n].dataset.height+"px; ";
	}
	
        div.setAttribute("class", "youtube-div");
        v[n].setAttribute("style", style_string);
        div.innerHTML = labnolThumb(v[n].dataset.id, v[n].dataset.size);
        div.onclick = labnolIframe;
        v[n].appendChild(div);
    }
});

function labnolThumb(id, size) {
    if (typeof size == 'undefined') {
        size = 'hqdefault';
    }
    var thumb = '<img src="https://i.ytimg.com/vi/ID/' + size + '.jpg">',
        play = '<div class="play"></div>';
    return thumb.replace("ID", id) + play;
}

function labnolIframe() {
	var style_string = '';
        var iframe = document.createElement("iframe");
	var embed = "https://www.youtube.com/embed/ID?autoplay=1&rel=0";
	iframe.setAttribute("src", embed.replace("ID", this.dataset.id));

	if (typeof this.dataset.width != 'undefined') {
		iframe.setAttribute("width", this.dataset.width);
	}
	else
	{
		style_string += "width: 100%; ";
	}
	
	if (typeof this.dataset.height != 'undefined') {
		iframe.setAttribute("height", this.dataset.height);
	}
	else
	{
		style_string += "height: 100%; ";
	}
	
	iframe.setAttribute("style", style_string);
	iframe.setAttribute("frameborder", "0");
	iframe.setAttribute("allowfullscreen", "1");
	this.parentNode.replaceChild(iframe, this);
}