Вашему вниманию скрипт, который будет затемнять фон, кроме видео, тем гораздо комфортно просматривать различные видео ролики или фильмы. Здесь все заключается в скрипте, также прилагаться стили, где можете красиво оформить кнопку. Так как если не выключен свет, то кнопка виде лампочки не горит, стоит только отключить. как сразу меняет оттенок.
А вообще такая функция применяется на сайтах, где превалирует контент с плеером для просмотра роликов. Что изначально можно прочесть или сразу преступить к просмотру и при этом отключив свет.
Проверено на тестовой площадке, где при заходе на сайт или открытие страницы так получаться.
Достаточно кликнуть на функцию отключение света и так выглядит.
Приступаем к установке:
HTML
Код
<center>
<div id="kegusoudaned"><a class="nednstanemoton" href="javascript:void(0);">Включить свет</a></div>
<div id="lightsVideo">
<iframe class="video" width="640" height="360" src="https://www.youtube.com/embed/eUoJgdkuqTs" frameborder="0" allowfullscreen></iframe>
</div>
</center>
<div id='motonsigned'/>
CSS
Код
#lightsVideo {
position:relative;
z-index:102;
}
#kegusoudaned {
max-width:640px;
text-align:left;
position:relative;
height:25px;
display:block;
}
.nednstanemoton {
position:absolute;
z-index:101;
background-image:url(http://zornet.ru/ABVUN/Abas/degakolas/lights-on.png);
background-repeat:no-repeat;
background-position:left;
padding: 0 0 0 20px;
outline:none;
text-decoration:none;
}
.nednstanemoton:hover {text-decoration:underline;}
.gunedecaused {
color:#ffff00 !important;
background-image:url(http://zornet.ru/ABVUN/Abas/degakolas/lights-off.png);
}
#motonsigned {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:absolute;
left:0;
top:0;
width:100%;
z-index:100;
}
JQUERY
Код
$(document).ready(function(){
$("#motonsigned").css("height", $(document).height()).hide();
$(".nednstanemoton").click(function(){
$("#motonsigned").toggle();
if ($("#motonsigned").is(":hidden"))
$(this).html("Turn off the lights").removeClass("gunedecaused");
else
$(this).html("Turn on the lights").addClass("gunedecaused");
});
});
На этом вся установка завершена.
Демонстрация
