Выключить свет

[Rockem]

Для начало вам необходимо скачать js файл из вложений и залить его в папку с вашим шаблон, а далее следуете инструкции ниже.

Перед закрывающимся тегом </body> подключаем js скрипт:

<script type="text/javascript" src="{THEME}/js/jquery.allofthelights.min.js"></script>

В полную новость перед iframe добавить:

<div class="switch"></div>

Далее необходимо iframe присвоить класс "video", Пример:

<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/h4TLfeXccJY" frameborder="0" allowfullscreen></iframe>

В любой js файл в самый конец добавить:

$(document).ready(function() {
    $('.video').allofthelights();
});

Куда вам удобнее поставить кнопку при нажатие на которой будет происходить выключение света:

<span class="switch button allofthelights">Выключить свет</span>

Демо: https://jsfiddle.net/nanqporo/

****** Второй способ по проще ******

В любой js файл добавить следующий код:

$('body').on('click', '.off-light', setOffLight);
$('body').on('click', '.block-off-light', setOnLight);

function setOffLight(){
    $('.block-off-light').show();
    setTimeout(function(){
        $('.block-off-light').addClass('on');
    }, 200);
}

function setOnLight(){
    $('.block-off-light').removeClass('on');
    setTimeout(function(){
        $('.block-off-light').hide();
    }, 600);
}

Iframe присвоить класс "video", Пример:

<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/Pdz0n2EqRWY" frameborder="0" allowfullscreen></iframe>

В любой css файл добавить:

.block-off-light {
    transition: .6s;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 301 !important;
    position: absolute !important;
    background: rgba(0, 0, 0, 0.95)
}
iframe.video {
    position: relative;
    z-index: 302;
}
.block-off-light.on {
    opacity: 1
}

Куда вам удобнее поставить кнопку при нажатие на которой будет происходить выключение света:

<span class="off-light">Выключить свет</span>

Демо: https://jsfiddle.net/9Lhjwpj7/

 

[anime]

Не работает на iPad

 

[aeneas]

Не работает на iPad

говорят много где не работает, вон где то тут в ветке брокер тоже жаловался ) он хочет порно смотреть в темноте а не выходит )

 

[Evurg]

Мне кажется это бесполезная фича, нафига гасить свет если все ровно плеер на весь экран делать.

 

[Powerok19]

Мне кажется это бесполезная фича, нафига гасить свет если все ровно плеер на весь экран делать.

Засорить ГС всяким мусором то нужно )))

 

[aeneas]

Засорить ГС всяким мусором то нужно )))

это обязательно! )))))))

 

[AndreyM]

нафига гасить свет

чтобы рекламу не видеть

 

[BROKER]

Засорить ГС всяким мусором то нужно )))

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

 

[Evurg]

если видос в среднем качестве то его не кто не разворачивает на полный экран

Сейчас бы в 2017 году фильмы не на весь экран смотреть)

 

[Evurg]

чтобы рекламу не видеть

Ну да хак убивает ПФ по рекламе)

Куда вам удобнее поставить кнопку при нажатие на которой будет происходить выключение света:

При нажатии на плеер думаю будет лучше.

 

[Rockem]

Второй способ по проще.

В любой js файл добавить следующий код:

$('body').on('click', '.off-light', setOffLight);
$('body').on('click', '.block-off-light', setOnLight);

function setOffLight(){
    $('.block-off-light').show();
    setTimeout(function(){
        $('.block-off-light').addClass('on');
    }, 200);
}

function setOnLight(){
    $('.block-off-light').removeClass('on');
    setTimeout(function(){
        $('.block-off-light').hide();
    }, 600);
}

Iframe присвоить класс "video", Пример:

<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/Pdz0n2EqRWY" frameborder="0" allowfullscreen></iframe>

В любой css файл добавить:

.block-off-light {
    transition: .6s;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 301 !important;
    position: absolute !important;
    background: rgba(0, 0, 0, 0.95)
}
iframe.video {
    position: relative;
    z-index: 302;
}
.block-off-light.on {
    opacity: 1
}

Куда вам удобнее поставить кнопку при нажатие на которой будет происходить выключение света:

<span class="off-light">Выключить свет</span>

Демо: https://jsfiddle.net/9Lhjwpj7/

 

[anime]

Второй способ по проще.

В любой js файл добавить следующий код:

$('body').on('click', '.off-light', setOffLight);
$('body').on('click', '.block-off-light', setOnLight);

function setOffLight(){
    $('.block-off-light').show();
    setTimeout(function(){
        $('.block-off-light').addClass('on');
    }, 200);
}

function setOnLight(){
    $('.block-off-light').removeClass('on');
    setTimeout(function(){
        $('.block-off-light').hide();
    }, 600);
}

Iframe присвоить класс "video", Пример:

<iframe class="video" width="560" height="315" src="https://www.youtube.com/embed/Pdz0n2EqRWY" frameborder="0" allowfullscreen></iframe>

В любой css файл добавить:

.block-off-light {
    transition: .6s;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 301 !important;
    position: absolute !important;
    background: rgba(0, 0, 0, 0.95)
}
iframe.video {
    position: relative;
    z-index: 302;
}
.block-off-light.on {
    opacity: 1
}

Куда вам удобнее поставить кнопку при нажатие на которой будет происходить выключение света:

<span class="off-light">Выключить свет</span>

Демо: https://jsfiddle.net/9Lhjwpj7/

Такое чувство, что не тестируешь когда что-то делаешь. А как потом включить свет? У меня кнопки после нет.

 

[Karabas Barabas]

Такое чувство, что не тестируешь когда что-то делаешь. А как потом включить свет? У меня кнопки после нет.

По любому месту клацни потом))

 

[anime]

По любому месту клацни потом))

Не работает

 

[BROKER]

Не работает

Да как не работает то? В трех браузерах проверил и все нормально работает.

 

[anime]

Да как не работает то? В трех браузерах проверил и все нормально работает.

Да вот так вот. Попробуй с мака зайти и по кликать. Или с ipad

 

[BROKER]

Да вот так вот. Попробуй с мака зайти и по кликать. Или с ipad

А ну да, кто то писал уже что на маке не работает, хз почему.

 

[Rockem]

@anime, Видать ты что-то не так делаешь... у меня все прекрасно работает + есть же демо где очень хорошо видно работоспособности скриптов. Второй скрипт я вырезал с filmix не думаю что он не работает на mac или ipad проверял через симуляторы все работает вроде нормально.

 

[anime]

@anime, Видать ты что-то не так делаешь... у меня все прекрасно работает + есть же демо где очень хорошо видно работоспособности скриптов. Второй скрипт я вырезал с filmix не думаю что он не работает на mac или ipad проверял через симуляторы все работает вроде нормально.

Не сравнивай симулятор с натуральными устройствами. И что же я могу не так делать? Кликнуть на пустом месте не так. Тогда напиши инструкцию, как я должен кликать и на каких устройствах.

 

[Лукорез]

@anime, У тебя не работает в одном браузере или в нескольких? Может быть проблема в самом шаблоне, например какой-то слой с "z-index", перекрывает элементы или какой-то блок с абсолютным позиционированием нарушает стек. Если у тебя нормально работает в хроме, но не работает в сафари - просто не кроссбраузерный css.

UPD: Проверил на маке в сафари, хроме и ФФ. Все отлично работает.