Я работаю над расширением браузера, которое позволяет мне изменять содержимое других сайтов.
Я знаю о allowfullscreen и о том, как сделать так, чтобы элемент внутри iframe отображался в полноэкранном режиме и занимал весь видовой экран. Но в этом вопросе я хочу узнать, как заставить элемент перейти в полноэкранный режим в пределах фрейма.
Сценарий
Такие сайты, как HBO , используют position: absolute почти для каждого элемента на своей странице, включая элемент video. Когда вы пытаетесь отобразить видео на своей странице в полноэкранном режиме, они определяют размер области просмотра и соответственно масштабируют элементы, изменяя свойства width и height нескольких узлов. Это в сочетании с сокрытием ненужных элементов дает пользователям хороший полноэкранный опыт. В результате их подхода чрезвычайно трудно изменить CSS этих элементов вручную.
Установка position: fixed; top: 0; left: 0; width: 100%; height: 100%; для элемента video на самом деле не работает, так как, по крайней мере, вам также потребуется стилизовать элементы управления видео.
Можно ли разрешить элементу работать в полноэкранном режиме, но только в пределах рамки iframe? Обратите внимание, что код Javascript на сайте должен выполняться так, как если бы он успешно переключался в полноэкранный режим, но только в пределах iframe.