У меня есть абсолютно позиционированное фоновое видео, которое было «обрезано», то есть верхние и нижние 20% или около того скрыты.
Вот ссылка на то, что я построил (область героя):
http://pchapman -sandbox.dev.vuforia.com / vuforia-посадочная /
В центре этого видео в нескольких точках показан телефон с важным видеоконтентом в телефоне. Мне нужен этот телефон, чтобы оставаться в центре этой обрезанной области.
Проблема : в настоящее время я написал 7 медиа-запросов с мягким переходом. Однако при различной ширине центрирование отключено, и это неуклюжее решение .
Высота области обрезки варьируется от 420px до 460px
Текущий контроль на <video>, начинается так:
top: -35vh;
@media screen and (min-width: 2000px) and (max-width: 2400px) {
top: -31vh !important;
transition: top 2s ease-in;
}
// multiple media queries down to...
@media screen and (max-width: 980px) {
top: 0 !important;
transition: top 2s ease-in;
}
Мне бы понравилась опция calc(); рассчитать значение top на основе ширины браузера. Я проверил несколько ссылок, включая управление заполнением по высоте, и посмотрел на SASS Poly Fluid Sizing, но я не могу заставить что-либо работать, и я быстро достиг точки разочарования. Плюс, я не думаю, что я так хорошо понимаю calc(), какие ценности идут куда.
Это правильный подход? Должен ли я использовать что-то еще вместо этого? Я бы предпочел CSS решение, если это возможно.
Спасибо за любую помощь!