• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Включение и выключение света для видео сайта (Скрипт затемнение экрана при просмотре видео)
Включение и выключение света для видео сайта
Kosten
Дата: Вторник, 2019-01-22, 21:46 | Сообщение 1
Администраторы
Сообщений:20773
Награды: 56


Вашему вниманию скрипт, который будет затемнять фон, кроме видео, тем гораздо комфортно просматривать различные видео ролики или фильмы. Здесь все заключается в скрипте, также прилагаться стили, где можете красиво оформить кнопку. Так как если не выключен свет, то кнопка виде лампочки не горит, стоит только отключить. как сразу меняет оттенок.

А вообще такая функция применяется на сайтах, где превалирует контент с плеером для просмотра роликов. Что изначально можно прочесть или сразу преступить к просмотру и при этом отключив свет.

Проверено на тестовой площадке, где при заходе на сайт или открытие страницы так получаться.



Достаточно кликнуть на функцию отключение света и так выглядит.



Приступаем к установке:

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");
});
});


На этом вся установка завершена.

Демонстрация
Прикрепления: 2274905.jpg(44.8 Kb) · 2901604.jpg(44.1 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Включение и выключение света для видео сайта (Скрипт затемнение экрана при просмотре видео)
  • Страница 1 из 1
  • 1
Поиск: