Как рассчитать коэффициенты масштабирования наложения/соотношение сторон при масштабировании до видового экрана другого ⇐ CSS

[Anonymous]

Я работаю с тремя элементами:

• Видео с использованием тега .
• Фоновый контейнер/область области просмотра видео (содержащая видео разных размеров).
• Наложение на видео.

Как мне масштабировать и позиционировать наложение для правильного наложения на масштабированное видео?
Вот моя система в основном:


Это 3 элемента в системе.

• Видео может иметь произвольные соотношения сторон (4/3, 1/ 1, 2/3, 1/3, 5/4 и т. д.). Ширина может быть больше, меньше или равна высоте.
• Видео имеет большой размер (скажем, его ширина/высота 4000 х 3000 пикселей).
• Видео помещается в контейнер с фиксированным соотношением сторон (в данном случае 2/1).
• Размеры контейнера — 600 x 300 пикселей. размеры.
• Наложение размещается поверх видео, и его необходимо разместить в определенном положении и масштабе внутри видео, внутри контейнера.

Должно выглядеть примерно так:
[img]https://i. sstatic.net/TMLKqonJ.png[/img]

Я пробовал это сделать:

Код: Выделить всё

const videoAspectRatio =
videoEl?.videoWidth && videoEl?.videoHeight
? videoEl.videoWidth / videoEl.videoHeight
: 1;

const visibleVideoWidth =
width > height
? videoAspectRatio < 1 // width is less than height
? height * videoAspectRatio
: width
: width;
const visibleVideoHeight =
width > height
? videoAspectRatio < 1 // width is greater than height
? width * videoAspectRatio
: height
: height;

Здесь ширина и высота — это вычисленные браузером размеры контейнера.
Цель с видимымVideoWidth заключается в получении уменьшенных размеров видео с учетом контейнера w/h. Затем он располагается как абсолютно позиционированный элемент div над видео, а наложение (имеющее процентную ширину/высоту, как SVG) помещается в этот элемент управления.

Код: Выделить всё

Что-то не так с моими уравнениями, наложение выходит за пределы моего видимого видео. Как правильно рассчитать положение наложения?
Наложение содержит многоугольники SVG, расположенные в определенном поле просмотра. Таким образом, масштабируя наложение до видимого видео и размещая абсолютный элемент div над видео так, как я это сделал, я ожидаю, что наложение поместится в видео.Что я делаю не так?

Подробнее здесь: https://stackoverflow.com/questions/784 ... -a-differe