Videos: Truco para "apagar" y "encender" las luces

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Este es uno de los scripts que más nos gustan a los que disfrutamos ver videos en la red, es un script de Janko y funciona con jQuery.

Se trata de "apagar las luces" para que todo lo que haya en la página se oscurezca menos el video, así no habrá otros elementos que nos distraigan mientras vemos el video y nos sentiremos como en el cine :)

Puedes ver un ejemplo aquí mismo, presionando el enlace que dice "Apagar las luces".
Cuando lo desees puedes presionar de nuevo el enlace y las luces se encenderán.

Apagar las luces

Para poner este efecto de "apagar las luces" en el blog, entra en la Edición HTML y antes de </head> pega el script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
< script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#oscuridad").css("height", $(document).height()).hide();
$(".lightSwitcher").click(function(){
$("#oscuridad").toggle();
if ($("#oscuridad").is(":hidden"))
$(this).html("Apagar las luces").removeClass("turnedOff");
else
$(this).html("Prender las luces").addClass("turnedOff");
});
});
//]]>
< /script>

Después agrega antes de ]]></b:skin> los estilos:

/* Apagar las luces
----------------------------------------------- */
#videoLuces {
position:relative;
z-index:102;
}
#apagador {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
margin: 25px 0 0 60px;
}
.lightSwitcher {
position:absolute;
z-index:101;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNYTCgoM2KKzm448FG1DfBrQUDvcp3iD2nwXvhbIlefFYIvuaVK4cg3VBpTjRYjZen0ZAnWxvzkbOa8Jzg80gvKhICsh4f5HAbvG8SkqcA6X2WoneKha_MNK-gSIVy0NEHD_6bAJ0nxy0/s16/luces-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.lightSwitcher:hover {text-decoration:underline;}
.turnedOff {
color:#ffff00 !important;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB97L58pMU5idZ3okeQTFQCLBvpd03q2r5fB_esuVht3T_r_7wxBZ4rhBakP-mRB9SOzVykgYGkDIspDmhXnczCRTxcCB3K17cCqEW_0uQhMEOTH11o8FhMesitdXRXNOnE8jhle63Qpw/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.7; /* Opacidad de la pantalla */
filter:alpha(opacity=70); /* Opacidad de la pantalla */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Luego, antes de </body> agrega esto:

<div id='oscuridad'/>

Y por último, donde quieras poner tu video, ya sea en una entrada, o en un elemento HTML/Javascript usa este código:

<center>
< div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar las luces</a></div>
< div id="videoLuces">
...Aquí el código del video...
< /div>
< /center>

Agrega donde se indica el código de tu video y listo. A disfrutar los videos con las luces apagadas.

Recuerda que el truquillo usa jQuery, así que si usas Scriptaculous o Mootools deberás aplicar un parche, y si usas otra versión de jQuery deberás usar sólo una.