Проблемы с соотношением сторон и адаптивным масштабированием с помощью Plyr + HLS (Cloudflare R2) ⇐ IOS

[Anonymous]

Описание проблемы:
Я разрабатываю веб-приложение, которое передает потоковое видео из Cloudflare R2 по протоколу HLS с использованием библиотеки Plyr.io для пользовательского интерфейса.
Проблема возникает именно на мобильных устройствах при переключении в ландшафтный режим. Я не могу заставить видео вести себя как стандартный проигрыватель (например, YouTube или Google Drive), где видео заполняет 100 % доступной высоты, сохраняя исходное соотношение сторон, добавляя черные полосы по бокам только при необходимости, не обрезая и не масштабируя изображение.
Технические подробности:
* Протокол: HLS (.m3u8)
* Хранилище: Cloudflare R2
* Библиотека пользовательского интерфейса: Plyr.io
* Платформа: React / Tailwind CSS
Текущее поведение:
* Если для контейнера установлена ширина: 100 %, видео расширяется, чтобы заполнить всю ширину, но обрезается сверху и снизу (увеличение масштаба), поскольку оно превышает высоту альбомной ориентации.
* При других конфигурациях я получаю эффект «окна» (поля со всех четырех сторон), в результате чего небольшое видео оказывается в центре экрана.
Ожидаемый результат:
В альбомном режиме видео должно «соответствовать» высоте устройства (100vh), сохраняя при этом соотношение сторон 16:9. Черные полосы должны появляться по бокам только в том случае, если экран шире, чем пропорции видео.
Вопрос:
Это поведение вызвано встроенным плеером мобильного браузера (особенно на iOS/Android) или это проблема внутренних CSS-контейнеров Plyr? Существует ли определенная конфигурация Plyr или метод CSS (например, соотношение сторон или соответствие объекта), позволяющий игроку отдавать приоритет высоте над шириной без применения эффекта масштабирования/обрезки?

Подробнее здесь: https://stackoverflow.com/questions/798 ... udflare-r2