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


Этот код отвечает за включение и отключение света вокруг iframe - плеера, что основном можно увидеть на тематических сайтах, таких как кино онлайн или где присутствуют плеер. Так как этот отличное приложение для просмотра, если у вас светлый по дизайн ресурс, то здесь подключаем этот скрипт и выводим на кнопку.

Где напишем, что по клику выключаем свет и аналогично по второму клику он включается. Все очень просто и удобно, так как сам плеер остается по умолчанию, а вокруг просто становится темнее..

Как пример, это на светлом формате:



Здесь выключаем свет и картина совершенно по другому смотрится:



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

Первым делом подключаем библиотеку

Код
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>


HTML

Код
<iframe width="560" height="315" src="https://www.youtube.com/embed/TjtYXGTlBjo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br><br>
<button class="nudesedtab">Включить/Выключить</button>
<div id='tasetupo-kedgaben'></div>

CSS

Код
#tasetupo-kedgaben {
background:#000;
opacity:0.9;
filter:alpha(opacity=90);
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
z-index:100;
}

.nudesedtab {
    font-size: 11px!important;
    padding: 5px 8px;
    margin: 0 0 1px;
    border: none;
    font-weight: normal!important;
    cursor: pointer;
    background: #0c70b5;
    text-transform: uppercase;
    color: #e8e5e5;
    width: auto !important;
    border-radius: 3px;
}

JQUERY

Код
var per = 0;
$(document).ready(function(){
  $("#tasetupo-kedgaben").css("height", $(document).height()).hide();
  $(document).click(function(e) {
    if(!$(e.target).hasClass('nudesedtab') && per == 1) {
   $("#tasetupo-kedgaben").toggle();
   per = 0;
    }
  });
  $(".nudesedtab").click(function(){
    $("#tasetupo-kedgaben").toggle();
    per += 1;
    if (per == 2) {
   per = 0;
    }
  });
});

Примечание: Если вы берете с видео хостинг YouTube код на плеер, то он должен выглядит так, как здесь представлен.

Демонстрация
Прикрепления: 3150769.jpg(46.6 Kb) · 3285846.jpg(43.0 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Скрипт выключить свет для просмотра видео (Как выключить свет вокруг плеера при помощи скрипта)
  • Страница 1 из 1
  • 1
Поиск: