Seguramente en muchas webs de Streaming de video podréis ver que tienen un botón u opción para poner el fondo de la página en negro y resaltar el reproductor de video, a esto se le conoce como apagar y encender las luces del sitio web en cuestión. Pues bien, utilizando CSS, jQuery y HTML vamos a aprender cómo hacer esto de forma muy sencilla.

HTML

<div id="luces"></div>
        
<div id="video">
     	<iframe width="420" height="315" src="http://www.youtube.com/embed/PwfQSWoyA5k" frameborder="0" allowfullscreen></iframe>
</div>
        
<input type="button" value="Apagar/encender las luces" id="apagar" />

La capa «luces» es aquella que va a cubrir toda la página en negro, más adelante veremos las propiedades CSS que le daremos a ésta. Después, la capa «video» es una capa que hemos utlizado para poner un video de Youtube centrado en la página. Por último ponemos un botón para encender y apagar las luces.

CSS

body{
	margin:0;
}
			
#luces{
	background-color:black;
	opacity:0.9;
	position:absolute;
	height:100%;
	width:100%;
	z-index:1;	
}
			
#video{
	position:absolute;
	z-index:2;
				
	height:315px;
	width:420px;
				
	top:50%;
	left:50%;
				
	margin-left:-210px;
	margin-top:-157px;				
}
			
input[type="button"]{
	position:absolute;
	z-index:2;
				
	height:40px;
	font-size:16px;
	margin-left:20px;
	margin-top:20px;
}

A la capa «luces» la ponemos el fondo negro, algo de opacidad al fondo, altura y anchura al 100% para que ocupe toda la página y posición absoluta con el «z-index» al «1«. Si queremos que otros elementos estén por encima de ésta capa, como hemos hecho con la capa «video«, debemos ponerle a la propiedad «z-index» un valor mayor al de la capa «luces«, en este caso como tiene que ser mayor que «1» le ponemos a la capa «video» el valor «2«.

Hacemos lo mismo con el botón para apagar y encender las luces.

jQuery

Incluímos la librería jQuery desde la CDN de Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Ahora vamos con el código:

$(document).ready(function(){
				
	//escondemos el div
	$("#luces").hide();
				
	$("#apagar").click(function(){
				
		$("#luces").fadeToggle(250);
			
	});
				
});

El código anterior es muy simple, cuando se pincha en el botón de encender o apagar las luces, muestra o esconde la capa «luces» dependiendo si las luces están apagadas o encendidas.

Así de simple. Cualquier consulta no duden en preguntar.

Ver ejemplo