Kempston Nov 18 2020 at 20:14

Растянуть видео в браузере

7 min

22K

HTML*JavaScript*Website development*Browser extensions

Comments 8

aamonster Nov 18 2020 at 23:16

Когда инжектите скрипт в табы – поставьте allFrames=true (или вообще можете инжектить content script штатным образом, через манифест). Не надо сканировать все фреймы – за вас это сделает браузер, и политики безопасности не помешают.

Kempston Nov 19 2020 at 01:10

Спасибо за наводку на этот флаг. Пока получилось декларативно через манифест. Через свойство allFrames:true почему-то все равно не дает доступ к фреймам. А хотелось бы дать пользователю выбор, использовать ли расширение на конкретной странице или нет, а не подключать его везде принудительно… Буду дальше разбираться с этим.
Похоже, в скором времени выйдет новая версия расширения.

aamonster Nov 19 2020 at 07:28

Если вы из одного фрейма пытаетесь дотянуться до другого – может не прокатить, тут вы на равных со скриптами с сайтов. Всегда работает общение между контент-скриптами и бэкграундом, хотите из главного фрейма управлять iframe – посылайте сообщения в бэкграунд и из него в нужный. (ну или ещё window.postMessage работает, но посылаемые им сообщения не только вашему скрипту приходят)

Kempston Nov 19 2020 at 20:31

Удалось получить доступ к видео через allFrames:true. Для этого надо было еще в манифест добавить дополнительное разрешение… Теперь видео распознается практически на всех сайтах. Дополнил статью.

ivan386 Nov 19 2020 at 00:46

Я у себя простенький CSS добавляю:

video { object-fit: cover !important }

Kempston Nov 19 2020 at 01:15

Как я понимаю, это способ вписать видео в блок, но без возможности изменения соотношения сторон и плавного масштабирования.

ivan386 Nov 19 2020 at 01:34

cover соотношение сторон не меняет и покрывает блок содержимым. Есть ещё: fill, contain, none, scale-down.

object-fit

fill
Смещаемый контент меняет свой размер таким образом, чтобы заполнить всю область внутри блока: используется вся ширина и высота блока.

contain
Смещаемый контент меняет свой размер таким образом, чтобы подстроится под область внутри блока пропорционально собственным параметрам: окончательный размер контента будет определен как "помещенный внутрь" блока, ограничиваясь его шириной и высотой.

cover
Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определен как "покрытие" блока, ограничиваясь его шириной и высотой.

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

scale-down
Контент изменяет размер, сравнивая разницу между none и contain, для того, чтобы найти наименьший конкретный размер объекта.

HorsyNox Nov 19 2020 at 03:40

Раз пошла такая тема, думаю уместно будет чуть пояпиариться)
Лет пять назад (тогда в ютубе «большой» плеер занимал ещё намного меньшую площадь экрана, чем сейчас, но всё ещё актуально) сделал для себя юзерстиль, который растягивает плеер на весь вьюпорт и (опционально не)убирает скроллбар. Само видео никак не обрезает. В общем, почти фуллскрин, но не фуллскрин. Может кому зайдёт userstyles.org/styles/122032/youtube-real-cinema-mode
Сайт юзерстайлс нещадно тупит последние пару лет. Можно порефрешить и подождать, обычно пробивает со временем.