Tutorial: efeito "Apagar as luzes" nos vídeos

Você já devem ter visto este efeito em outros blogs, inclusive aqui no PH. Geralmente é colocado quando se tem um post com vídeos e acima você vê um link "Apagar as luzes" clicando nele, faz com que a tela toda do seu PC fique escura e só é visualizada o vídeo. Pois bem. Irei passar o código pra vocês.

Modelo > editar Html > pesquise por: 

</head> 

e acima dele, cole o seguinte código:

<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 a Luz").removeClass("turnedOff");

else

$(this).html("Acender as Luzes").addClass("turnedOff");

});

});

//]]>

</script>

Ctrl+F ou F3 e pesquise por:

</body> 

acima dele, cole o seguinte código:

<div id='oscuridad'/>

Ctrl+F ou F3 e pesquise por:

]]></b:skin> 

e acima dele, cole o seguinte código:

/* 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(http://lh6.googleusercontent.com/-azJxijJlWX4/T3vT2giQqkI/AAAAAAAACWk/6wt4sBdcHEY/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(http://lh4.googleusercontent.com/-J0U5xRqb7KU/T3vT2kcmUsI/AAAAAAAACWo/-VTwo42-Nj0/s16/luces-off.png);

}

#oscuridad {

background:#000;

opacity:0.9; /* Opacidade da Tela */

filter:alpha(opacity=90); /* Opacidade da tela */

position:absolute;

left:0;

top:0;

width:100%;

z-index:100;

}

VERMELHO: altere a imagem da lâmpada quando for para apagar as luzes

VERDE: altere a imagem da lâmpada quando for para acender as luzes

SE NÃO DEU NADA DE ERRADO, SALVE!

código final para as postagens: 

Antes do vídeo na parte de Html cole o código:

<div id="apagador">

<a class="lightSwitcher" href="javascript:void(0);">Apagar as luzes</a></div>

<div id="videoLuces">

ou

<center>

<div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">Apagar as luzes</a></div>

<div id="videoLuces">

código do vídeo

</div>

</center>

VERMELHO: coloque o código do vídeo

Crédito: Meu blog de codigos.

Byee♥