Unity Learn Premium Custom Video Player Div Draggable Resizable (Javascript)

unity-premium-player.js

// USAGE: copy paste this whole thing into Browser Console window (use F12 to open it)
// Custom video Player Floating Div For Unity Learn Premium v1.0

// main div
var mainDiv = document.createElement('div');
mainDiv.style.backgroundColor = 'black';
mainDiv.style.minWidth = "420px";
mainDiv.style.minHeight = "300px";
mainDiv.style.position = "absolute";
mainDiv.style.zIndex = "100000";
mainDiv.style.resize = "both";
mainDiv.style.overflow = "hidden";
mainDiv.style.border = "1px black solid";
document.body.appendChild(mainDiv);

// header div for dragging
var headerDiv = document.createElement('div');
headerDiv.style.backgroundColor = 'gray';
headerDiv.style.minWidth = "420px";
headerDiv.style.minHeight = "20px";
headerDiv.style.cursor = "grabbing";
headerDiv.innerHTML = "VideoViewerPro9000";
mainDiv.appendChild(headerDiv);

// header close button
var closeDiv = document.createElement('div');
closeDiv.style.position = "relative";
closeDiv.style.float = "right";
closeDiv.style.backgroundColor = 'black';
closeDiv.style.align = "left";
closeDiv.style.cursor = "crosshair";
closeDiv.style.width = "20px";
closeDiv.style.height = "20px";
closeDiv.style.color = "white";
closeDiv.innerHTML = "X";
headerDiv.appendChild(closeDiv);

// video player div
var videoDiv = document.createElement('div');
videoDiv.style.width = "100%";
videoDiv.style.height = "100%";
videoDiv.style.padding = "0 0 30px 0";
videoDiv.style.backgroundColor = 'blue';
videoDiv.style.zIndex = "100001";
// add inside main div
mainDiv.appendChild(videoDiv);
// add videoplayer inside child div
var videoplayer = document.getElementsByClassName("video-js")[0];
var originalParent = videoplayer.parentNode;
videoDiv.appendChild(videoplayer);

// force refresh div
mainDiv.style.height=(mainDiv.style.height+1)+"px";

// enable dragging for header bar
draggable(mainDiv);
function draggable(el) 
{
	headerDiv.addEventListener('mousedown', function(e) 
	{
		e = e || window.event;
		e.preventDefault();
		var offsetX = e.clientX - parseInt(window.getComputedStyle(mainDiv).left);
		var offsetY = e.clientY - parseInt(window.getComputedStyle(mainDiv).top);
		function mouseMoveHandler(e) 
		{
			e = e || window.event;
			e.preventDefault();
			el.style.top = (e.clientY - offsetY) + 'px';
			el.style.left = (e.clientX - offsetX) + 'px';
		}
		function reset() 
		{
			window.removeEventListener('mousemove', mouseMoveHandler);
			window.removeEventListener('mouseup', reset);
		}
		window.addEventListener('mousemove', mouseMoveHandler);
		window.addEventListener('mouseup', reset);
	});
}

// enable div close
closeDiv.onmousedown = ClosePlayer;
function ClosePlayer()
{
	originalParent.insertBefore(videoDiv.childNodes[0], originalParent.firstChild);
	mainDiv.remove();
}