Apagar las luces para ver videos

Comparteme :

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

Demostración

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.

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/AVvXsEiNDFV2ZEvXMnqmJtPcT0HBrjPKHCAZ_vKpyqJVCwqzWS3dp0F1idjR3th6VukZzziJWek4uq1jeLKCGwlkey6pikAjofH4Ggzhk0fbOWXEMCtrzrXmhk4Q_rGo9EQpuMFSFbIbgTZ1IoY/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/AVvXsEhmKqDYU4O7AQp_XKCanoaipRiTQaqnFx8lhcfzZz6_65wg9P0nm8EWf5NZZnjW5B54lKT3SYQ9ELae9JNNLfB4eHYqudqNM0fmajIzuDtAaMoTivOYSesA4_kfMVVB7EP0-lJO7ByVwZo/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.

Comparteme :

Author : Bloguero Tutorial

Soy el creador y editor de éste blog, cree este blog porque me encanta escribir sobre tecnología e internet, diseño web, y recursos para webmasters y Bloggers. Además, mi único propósito, es divertirme y de paso si ayudo a otras personas, mucho mejor. , click aquí ?

Apagar las luces para ver videos.

Comparte

BLOGUERO TUTORIAL