JSFiddle - React, Tailwind, and code Playground
HTML
<div id="cortina" style="opacity: 0.9; display: none;"></div>
<div class="contenedor">
<h1>El nuevo video musical de 2NE1</h1>
<p>El grupo de chicas sur-coreano de KPOP conocidas como 2NE1 han lanzado su más reciene MV titulado <strong>Come Back Home</strong></p>
<p>
El video presenta una estética futurista, donde las integrantes de este cuarteto deciden vivir una aventura más allá de la realidad</p>
<div class="video">
<iframe width="560" height="315" src="//www.youtube.com/embed/vLbfv-AAyvQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="botones">
<a href="#" id="lucesOff" style="display: inline;" class="nrc">Apaga las luces!</a>
<a href="#" id="lucesOn" style="display: none;">Enciende las luces!</a>
</div>
CSS
#cortina{
background-color: #000;
height: 100%;
width: 100%;
position: fixed;
left: 0px;
top: 0px;
display:none;
}
.contenedor{
text-align:center;
position:relative;
}
.video{
width:560px;
margin:0 auto;
position:relative;
}
#botones{
position: relative;
width: 150px;
text-align: center;
margin: 10px auto;
}
#botones a{
text-decoration:none;
padding:8px;
background-color:#ccc;
}
JavaScript
$("#lucesOff").click(function () {
$("div#cortina").css({opacity: 0, display: "block"}).animate({opacity: 0.9},500);
$(".contenedor").css("color","#fff");
$("#lucesOff").fadeOut(0);
$("#lucesOn").fadeIn(0);
return false;
});
$("#lucesOn").click(function () {
$("div#cortina").fadeOut(500);
$(".contenedor").css("color","#000");
$("#lucesOn").fadeOut(0);
$("#lucesOff").fadeIn(0);
return false;
});