Youtube Script

/* Youtube script */

 function createVidElement(youtube) {
		var vid;
		var VID_SRC = youtube+"?autoplay=1";
		VID_SRC = VID_SRC.replace("watch?v=", "v/");
        vid = document.createElement('embed');
        vid.src = VID_SRC;
		vid.id="yt1";
		vid.autoplay="1";
        vid.setAttribute('loop', 'false');
		//vid.style['width'] = '750px';
		//vid.style['height']= '425px';
		vid.style['width'] = '100%';
		vid.style['height']= '100%';
        //vid.style['z-index'] = '10';
        //vid.style.align="center";
        //vid.style['left'] = 0;
        //vid.style['top'] = 0;
		//vid.style.verticalAlign="top";
		vid.setAttribute('wmode','transparent');
		//vid.style.opacity="0.8";
		return vid;
}

var chart=document.getElementById("chart-inner-container");
	chart.style.width="0px";
	chart.style.height="0px";
	chart.style.display="none";
	
function createPlayer(){
	let div = document.createElement("div");
	div.id="YTplayer";
	//div.style.minWidth = "120px";
	div.style.width="100%";
	div.style.height="100%";
	div.style.top = "0px";
	div.style.left = "0px";
	div.style.zIndex = 10000;
	div.style.background = "rgba(0,153,204,0.2)";
	//div.style.opacity = "0.7";
	div.style.color = "#1ecf07";
	div.style.position = "absolute";
	div.style.borderRadius = "10px";
	div.style.fontFamily = "Verdana";
	div.style.fontSize = "medium";
	div.style.textAlign = "center";
	
	let vidDiv = document.createElement("div");
	vidDiv.id="vidDiv";
	vidDiv.style.height="100%";
	vidDiv.style.width="100%";
	
	let header = document.createElement("div");
	header.style.background = "black";
	header.style.padding = "5px";
	header.innerHTML = "Youtube";
	header.style.borderRadius = "10px 10px 0px 0px";
	header.style.cursor = "move";

	let close = document.createElement("p");
	close.innerHTML = "☒";
	close.style.display = "inline";
	close.style.position = "absolute";
	close.style.right = "10px";
	close.style.cursor = "pointer";
	header.appendChild(close);
	close.addEventListener("click", function(){
		var exit= document.getElementById("YTplayer");
		exit.remove();
		chart.style.width="100%";
		chart.style.height="100%";
		chart.style.display="block";
		engine.stop();
	});
	div.appendChild(header);
	// Adding youtube div
	var youtubeTV=createVidElement("https://www.youtube.com/watch?v=roughtzsCDI");
	vidDiv.appendChild(youtubeTV);
	div.appendChild(vidDiv);
	
	let menu = document.createElement("div");
	menu.style.background = "black";
	menu.style.textAlign = "left";
	menu.style.align="left";
	menu.style.padding = "5px";
	menu.style.borderRadius = "0px 0px 10px 10px";
	menu.style.cursor = "pointer";
	
	//Create Textbox
	var x = document.createElement("INPUT");
	x.id='txt1';
	x.setAttribute("type", "text");
	x.placeholder="Paste youtube link here...";
	//x.style.position = "absolute";
	x.style.padding = "5px";
	x.style.width="70%"
	//x.style.borderRadius = "0px 0px 10px 10px";
	x.style.cursor = "pointer";
	menu.appendChild(x);
	
	let btn = document.createElement("BUTTON");
	btn.innerHTML = "GO";
	btn.style.backgroundColor="#4CAF50";
	btn.style.padding= "7px 22px";
	btn.style.border="none";
	btn.style.display="inline-block";
	btn.style.margin="4px 2px";
	btn.style.width="105px";
	btn.style.textAlign="center";
	menu.appendChild(btn);
	div.appendChild(menu);
	
	btn.addEventListener("click",function(){
		var x = document.getElementById("txt1");
		var ytlink = x.value;
		x.value="";
		var replace= document.getElementById("yt1");
			replace.remove();
		var youtube= createVidElement(ytlink);
		var vidid= document.getElementById("vidDiv");
		vidDiv.appendChild(youtube);
	})
	
	menu.addEventListener("mouseover",function(){
		btn.style.display="inline-block";
		x.style.display="inline-block";
	});
	menu.addEventListener("mouseout",function(){
		setTimeout(function(){
			btn.style.display="none";
			x.style.display="none";
		}, 5000);
		
	});
	
	//body = document.getElementsByTagName('body')[0];
    //body.appendChild(div);
	
	var addVid= document.getElementById("chart-container");
	addVid.appendChild(div);
	//document.body.appendChild(div);
	document.getElementsByClassName("strategy-stop")[0].addEventListener("click",function inner(){
		document.body.removeChild(div);
		document.getElementsByClassName("strategy-stop")[0].removeEventListener("click",inner);
	});
	
	dragElement(div,header);
}
createPlayer();

function dragElement(elmnt,header) {
	var x1 = 0, x2 = 0, y1 = 0, y2 = 0;
	header.onmousedown = dragMouseDown;

	function dragMouseDown(e) {
		e = e || window.event;
		y1 = e.clientX;
		y2 = e.clientY;
		document.onmouseup = closeDragElement;
		document.onmousemove = elementDrag;
	}

	function elementDrag(e) {
		e = e || window.event;
		x1 = y1 - e.clientX;
		x2 = y2 - e.clientY;
		y1 = e.clientX;
		y2 = e.clientY;
		elmnt.style.top = (elmnt.offsetTop - x2) + "px";
		elmnt.style.left = (elmnt.offsetLeft - x1) + "px";
	}

	function closeDragElement() {
		document.onmouseup = null;
		document.onmousemove = null;
	}
}

var theThing = setInterval(function(){
	for(var i=0; i<document.body.getElementsByTagName("span").length; i++){
		var r = getRandomInt(100, 255), g = getRandomInt(100, 255),
		b = getRandomInt(100, 255);
		var x = document.getElementsByTagName("span")[i];
		if(x.innerText=="Xperia"){
			document.body.getElementsByTagName("span")[i].innerText = "?? Xperia";
	}}
	
	for(var i=0; i<document.body.getElementsByTagName("td").length; i++){
		var x = document.getElementsByTagName("td")[i];
		if(x.innerText=="Xperia"){
			//document.body.getElementsByTagName("td")[i].innerText = "?? Xperia";
			document.body.getElementsByTagName("td")[i].appendChild(icon);
	}}
	
	//var x=document.getElementById("chart-controls-row");
	//x.style.width="100px";
	/*"rgb("+r+", "+g+", "+b+")"; } */
	/*var r = getRandomInt(100, 255), g = getRandomInt(100, 255),
		b = getRandomInt(100,255); document.getElementsByClassName("bet-button")[0].style.background = "rgb("+r+", "+g+", "+b+")";
		document.getElementsByClassName("bet-button")[0].style.boxShadow = "0 6px 0 rgb("+(r-100)+", "+(g-100)+", "+(b-100)+"),0 9px 25px rgba(0,0,0,.1)";*/ }, 200);
		function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
var icon;
var icon_SRC = "https://i.gifer.com/origin/ff/ff07ab538d7b8873fd991d5b7dacc88a_w200.gif";
 function createiconElement() {
        icon = document.createElement('icon');
        icon.src = icon_SRC;
		//icon.style.display = "inline-block";
		icon.style.position = "sticky";
		icon.style.right = "10px";
		icon.style.cursor = "pointer";
		icon.style['width'] = '25px';
        icon.style['z-index'] = '100';
    }
createiconElement();

engine.on('msg', function(gamedata){
 
  console.log(gamedata);
   
  });