Этот код отвечает за включение и отключение света вокруг 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 код на плеер, то он должен выглядит так, как здесь представлен.
Демонстрация
