• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Затемнение экрана при просмотре видео для сайта (Затемнение при просмотре видео с кнопкой включить)
Затемнение экрана при просмотре видео для сайта
Kosten
Дата: Понедельник, 2019-03-25, 15:29 | Сообщение 1
Администраторы
Сообщений:24185
Награды: 56


Этот скрипт больше подойдет для сайтов, где происходит просмотр видео, так как он по клику по кнопке может затемнить монитор, а точнее все, что не качается самого экрана. Где один плеер будет смотреться корректно, а по сторонам идет светло затемненная пленка, вообщем как вы сами выставите на стилистике CSS, которая закреплена к основе.

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

Так выглядит при установки:



Демонстрация

Код
[c]<h2>Выключить свет на сайте при просмотре видео</h2> [/c]
[c]<div class="dark-video"><iframe width="560" height="315" src="https://www.youtube.com/embed/Xy9tuH21q2I" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>[/c]
[c]<a href="javascript://" onclick="setCookie('light-on',1,365);eraseCookie('light-off');" id="switch-on">Выключить свет</a>
<a href="javascript://" onclick="setCookie('light-off',1,365);eraseCookie('light-on');" id="switch-off">Включить свет</a>
<script type="text/javascript" src="http://zornet.ru/Aben/Aben-Abag/darkino.js"></script>[/c]

<style type="text/css">
.shortstory iframe,.shortstory object,.dark-video {position:relative;z-index:999;}
#dark-block {position:fixed;top:0;left:0;background:rgba(0,0,0,0.9);z-index:998;width:100%;height:100%;display:none;}
/*стили плавающей иконки*/
img#switch-on {position:fixed;top:30px;left:15px;z-index:999;cursor:pointer;}
img#switch-off {position:fixed;top:30px;left:15px;z-index:999;cursor:pointer;display:none;}
/*стили обычной кнопки*/
a#switch-on {background:#888;color:#fff;position:relative;z-index:999;}
a#switch-off {background:#fff;color:#888;position:relative;z-index:999;display:none;}
a[id^="switch"] {padding:5px 10px;display:inline;border-radius:4px;}
a[id^="switch"]:hover {opacity:0.7;}
</style>
Прикрепления: 1991664.jpg(43.4 Kb)
Страна: (RU)
Kosten
Дата: Понедельник, 2019-03-25, 19:51 | Сообщение 2
Администраторы
Сообщений:24185
Награды: 56


Еще один рабочий вариант по затемнение экрана, это когда идет просмотр видео на сайте, где вы автоматически можете выключить свет и аналогично включить. Где при выключение все становится в прозрачно темном фоне, но это не касается плеера, что на темном фоне отлично просматривается.

Выключить и выключить свет при просмотре видео на сайте



Первым делом заходим в панель управления сайтом, на страница материала и Коментарии к нему:

Перед закрывающим тегом /head вставить следующий код:

Код
<script>
function toggle () {
  var perde = document.getElementById("dopamug_kaxated");
  if (perde.style.display != "block")
  perde.style.display = "block";
  else
  perde.style.display = "none";
  }
  </script>


Потом находим тег body, где нужно ниже прописать:

Код
<div id="dopamug_kaxated"></div>


CSS

Код
#dopamug_kaxated {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.8;
  filter: alpha(opacity=80);
  z-index: 100;
  }
   
  .telopodsa_mudebin {
  position: relative;
  background-color: tomato;
  z-index: 101;
  padding:10px;
  color:white;
  text-align:center;
  text-decoration:none;
  }
  .sategu_kidsam {
  position: relative;
  z-index: 101;
  display:block;
  }


Демонстрация
Прикрепления: 3011157.jpg(60.7 Kb) · tunas.zip(2.0 Kb)
Страна: (RU)
waak
Дата: Понедельник, 2019-03-25, 20:24 | Сообщение 3
Vip
Сообщений:545
Награды: 14


Если честно то как по мне то не нужный скрипт вообще так как виде смотрят на весь экран но каждому своё чисто для того что бы был можно поставить
Страна: (RU)
Kosten
Дата: Понедельник, 2019-03-25, 21:39 | Сообщение 4
Администраторы
Сообщений:24185
Награды: 56


waak, здесь с тобой не согласен, просто по себе сужу, если смотрю с компьютера, но на одном сайте этим эффектом пользовался. Иногда не хочется на полный экран монитора выводить. А вот с планшета, то там на полном экране, но не когда не пользовался, так по экрану растянул плеер, и нормально.
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Затемнение экрана при просмотре видео для сайта (Затемнение при просмотре видео с кнопкой включить)
  • Страница 1 из 1
  • 1
Поиск: