Efeito Apagar Luzes

Falae galera,trago aqui um tutorial muito legal na minha opnião,e o famoso "Apagar Luzes",muito encontrado em videos do youtube, vantagem desse script e que ele deixa seu blog de videos/animes... com uma "Cara" mais profissional,bom vamos ao tutorial

clique aqui para demonstração

Primeiro procure por:

</head>

Acima disso cole:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
    $(&#39;#mascara&#39;).css(&#39;height&#39;, $(document).height()).hide();
        $(&#39;.interruptor&#39;).click(function(e) {
            e.preventDefault();
            $(&#39;#mascara&#39;).toggle();
                if ($(&#39;#mascara&#39;).is(&#39;:hidden&#39;)) {
                    $(this).html(&#39;Apagar luzes&#39;).removeClass(&#39;apaga-acende&#39;);
                } else {
                    $(this).html(&#39;Acender luzes&#39;).addClass(&#39;apaga-acende&#39;);
                }
        });
      
});
</script>

Agora procure por:

]]></b:skin>

Acima disso cole:


/*Apagar Luzes-DOB
----------------------------------------------- */
#filme {
position:relative;
z-index:2;
margin:20px 0 20px 50px;
}
.interruptor {
position:relative;
z-index:2;
display:block;
width:120px;
margin-top: 25px;
}
#mascara {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
height:100%;
width:100%;
margin:0;
padding:0;
background:#000;
opacity:.75;
filter: alpha(opacity=75);
-moz-opacity: 0.75;
z-index: 1;
}
a.interruptor {
font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif !important;
text-shadow:0px 0px 2px #000000;
margin:1px;
color:#fff;/*Cor da fonte (Luzes "Acesas") */
background:#98bbbd; /*Cor de fundo (Luzes "Acesas") */
text-align:center;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius:5px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
box-shadow: #000 0px 0px 2px;
}
a.interruptor:hover {
font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
font-size:14px;
color:#fff;/*Cor da fonte (Luzes "Apagadas") */
background:#ccc;/*Cor de fundo (Luzes "Apagadas")*/
text-align:center;
text-decoration:none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.apaga-acende {
font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif !important;
text-shadow:0px 0px 2px #000000;
margin:1px;
background:#98bbbd;
color:#ffffff;
box-shadow: #000 0px 0px 2px;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}

Codigo para postagem:


<a class="interruptor" href="javascript:void(0)">Apagar luzes</a><div id="filme">
Codigo do player
</div>
Definicões do video (Caso não tenha apague esta linha)
<div id="mascara">
</div>


Bom galera,é até isso a proxima,qualquer duvida comentem