Cómo Añadir Modo Oscuro Para Ver Los Vídeos

Hoy traigo este script muy práctico para ver vídeos de cualquier plataforma en nuestro blog o sitio web. Está desarrollado por Janko Jovanovik y se ejecuta gracias a jQuery.

Su funcionamiento es muy sencillo, cuando hacemos click en el texto, todo la página se verá más oscura excepto el vídeo en cuestión, ofreciéndonos así una mejor experiencia visual.

A continuación te dejo un ejemplo donde puedes hacer click en Modo Oscuro para ver tu mismo el maravilloso efecto que nos brinda el script. Para desactivarlo simplemente vuelve a presionar el texto.

Modo Oscuro

Pues bien, para poder utilizarlo, tenemos que ir a la parte de Tema >  Edicion HTML de nuestra plantilla y buscamos la etiqueta </head> con ayuda del buscador del editor. Se activa con Ctrl + F y se ve así:

Justo antes de esa etiqueta debes pegar el script, aquí te dejo el texto:

<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>

Ahora busca la etiqueta ]]></b:skin> y pega antes este código CSS para los estilos del script:

/* Modo Oscuro Para Vídeos
----------------------------------------------- */
#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/AVvXsEgtlIQaqI-FVs6xFD24_R9uSFD9WLPDVT6FFtWZ3_xFWzSAzJQ_4ILXudXAf6AQCBUia_DGXh1U4ZAoYCwxT-SaryVi12dZink5LSI-lsNgZvB4sjMgpPw8lBdySiwLttSsHrMrlU35THw/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/AVvXsEgXskPs4mDWi-L1Sf92d7iWCAJGBkANG2NO03hnyBKF2f2I5XQHVVICS5RgBcKkWxcUhEIHsAt_ThtZt638xpu7TBeKXnCz1sYIDV0mj8BoSoYv0LxgbR5E4M02pwacKiT1-OsE86F57M8/s16/luces-off.png);
}
#oscuridad {
background:#000;
opacity:0.9; /* Opacidad de la pantalla */
filter:alpha(opacity=90); /* Opacidad de la pantalla */
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}

Por último, antes de la etiqueta </body> pega esto:

<div id='oscuridad'/>

Ahora solo queda añadir esto donde queramos que aparezca el script, ya sea una entrada, página o incluso un gadget.

<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Modo Oscuro</a></div>
<div id="videoLuces">
...Aquí va el código del vídeo deseado...
</div>

AVISO: No olvides que este script funciona con jQuery, por lo que debes tener en cuenta los siguientes puntos. - Si usas Scriptaculous o Mootools es obligatorio aplicar este parche para resolver los posibles errores.
- Si ya usas una versión distinta de jQuery en tu plantilla, debes de utilizar sólo una. A continuación te dejo una   guía sobre las distintas versiones de jQuery y los conflictos entre ellas.