Show only selected video

single-element.js

javascript:(function()%7Bif(typeof jQuery!%3D%3D'function')%7Bvar url%3D'%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.11.1%2Fjquery.min.js'%3Bvar script%3Ddocument.createElement('script')%3Bscript.src%3Durl%3Bvar head%3Ddocument.getElementsByTagName('head')%5B0%5D%3Bhead.appendChild(script)%3Bscript.onload%3DjqueryLoaded%7Delse%7BjqueryLoaded()%7Dfunction jqueryLoaded()%7Bremove_overlayed_elems()%3Bget_show_only_selected_elem()%7Dfunction remove_overlayed_elems()%7B%24('*').each(function()%7Bif(%24(this).css('position')%3D%3D'fixed')%7B%24(this).remove()%7D%7D)%7Dfunction get_show_only_selected_elem()%7B%24('body *').on('mouseover mouseout'%2Cfunction(event)%7Bif(event.type%3D%3D'mouseover')%7B%24(this).data('border'%2C%24(this).css('border'))%3B%24(this).css('border'%2C'3px solid rgba(255%2C0%2C0%2C.5)')%7Delse%7B%24(this).css('border'%2C%24(this).data('border'))%7Dreturn false%7D).on('click'%2Cfunction()%7B%24video%3D%24(this)%3Bshow_only_video(%24video)%7D)%3B%24(document).keyup(function(e)%7Bif(e.keyCode%3D%3D%3D27)%7B%24('body *').off()%3Bconsole.log('escape pressed')%3Bremoved_hovered_border()%7D%7D)%7Dfunction removed_hovered_border()%7B%24('body *').each(function()%7B%24(this).css('border'%2C%24(this).data('border'))%7D)%7Dfunction show_only_video(%24video)%7B%24body_children%3D%24('body').children()%3B%24body_children.remove()%3B%24video.appendTo('body')%3B%24('body').css(%7B'background'%3A'%23111'%2C'text-align'%3A'center'%2C'margin'%3A'100px'%7D)%3B%24video.css(%7B'border'%3A'1px solid %23000'%2C'box-shadow'%3A'2px 2px 8px %23000%2C 1px 1px 20px %23040404'%2C'margin'%3A'auto'%7D)%3B%24('html').css(%7B'box-shadow'%3A'1px 1px 2px %23000 inset'%7D)%7Dfunction add_all_elems_back()%7B%24video.remove()%3B%24('body').css(%7B'margin'%3A'0'%7D)%3B%24('html').css(%7B'box-shadow'%3A'none'%7D)%3B%24body_children.appendTo('body')%7D%7D)()

if(typeof jQuery !== 'function'){
	var url = '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'; 
	var script = document.createElement('script');
	script.src = url;
	var head = document.getElementsByTagName('head')[0];
	head.appendChild(script);
	script.onload = jqueryLoaded;
}else{
	jqueryLoaded();
}

function jqueryLoaded(){
	console.log('jquery loaded');
	remove_overlayed_elems();
	get_show_only_selected_elem();
}

function remove_overlayed_elems(){
	$('*').each(function(){
		if($(this).css('position') == 'fixed'){
			$(this).remove();
		}
	});
}

function get_show_only_selected_elem(){
	console.log('get_show_only_selected_elem');
	$('body *').on('mouseover mouseout', function(event) {
	    if (event.type == 'mouseover') {
	        $(this).data('border', $(this).css('border'));
	        $(this).css('border','5px solid rgba(255,0,0,.8)');
	    } else {
	        $(this).css('border', $(this).data('border'));
	    }
	    return false;
	}).on('click', function(){
		$video = $(this);
		show_only_video($video);
	});
	
	// cancel it all if escape
	$(document).keyup(function(e){
	    if(e.keyCode === 27){
	    	$('body *').off();
	    	console.log('escape pressed');
	    	removed_hovered_border();
	    }
	});
	
	// make button to add elems back
	// add_all_elems_back();
}

function removed_hovered_border(){
	// when press escape remove border from currentl hovered element
	$('body *').each(function(){
		$(this).css('border', $(this).data('border'));
	});
}

function show_only_video($video){
	$body_children = $('body').children(); // allow to add back if necessary
	$body_children.remove();
	$video.appendTo('body');
	$('body').css({'background':'#111', 'text-align':'center', 'margin':'100px'});
	$video.css({'border':'1px solid #000','box-shadow':'2px 2px 8px #000, 1px 1px 20px #040404', 'margin':'auto','min-height':'400px'});
	$('html').css({'box-shadow':'1px 1px 2px #000 inset'});
}

function add_all_elems_back(){
	$video.remove();
	$('body').css({'margin':'0'});
	$('html').css({'box-shadow':'none'});	
	$body_children.appendTo('body');
}