Букмарклет для просмотра ярких видеороликов с фильтром / в темном режиме

#javascript #css #youtube #bookmarklet

#javascript #css — код #YouTube #букмарклет

Вопрос:

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

Я обычно использую дополнение DarkReader для Firefox на всех веб-сайтах, которое переводит веб-сайты в темный режим.

Но аддон не работает для видео.

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

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

Ответ №1:

Это букмарклет, который затемняет веб-страницу в целом и оставляет кнопки доступными для просмотра:

 javascript: (function () {
    var FilterOnTopDiv = document.createElement('div');
    FilterOnTopDiv.setAttribute('style','width: 100%;
                     height:100%;
                     z-index:999999;
                     position:fixed;
                     left:0px;
                     top:0px;
                     background-color:#000;
                     opacity: 0.25;
                     pointer-events:none;');
    document.body.appendChild(FilterOnTopDiv);
}());
 

Значение opacity равно 0.25, что означает, что при нажатии на закладку несколько раз веб-страница всегда становится на 0.25 темнее за клик.

При перезагрузке веб-страницы, как обычно с букмарклетами, все сбрасывается.

Вы можете изменить цвет background-color , чтобы не только затемнить его, но и фильтровать другие цвета, например, чтобы отфильтровать синие тона.

Протестировано на Firefox версии 78.6.0esr (64-разрядная версия).