Проблема с выбором размера фона для фона с большими видеороликами

Question

У меня проблемы с изменением размера, чтобы сохранить соотношение сторон с большими видео. Я использую этот демонстрационный код: https://codeconvey.com/fullscreen-html5-responsive-video-background/

Моя проблема заключается в том, что я могу настроить центрирование видео на правильную работу, а видео изменяет размеры, сохраняя пропорции, если окно больше видео, но видео в формате 1920x1080 не изменяя размер, чтобы соответствовать высоте или ширине браузера на меньших экранах (скажем, ноутбук шириной 1440 пикселей). Кажется, что видео никогда не уменьшает его первоначальный размер.

Это как если бы тело не понимало, что область просмотра меньше, чем 1920x1080, потому что, я подозреваю, она определяет ширину 100% на основе ширины видеоэлемента. Если я закрою видео 1280x720p в этот код, изменение размера будет безупречно работать, поскольку видео всегда изменяется до заполнения экрана браузера.

Я попытался обернуть видео в элемент контейнера, но не увидел улучшения, изменив относительные/фиксированные/абсолютные позиции в любой комбинации, а также определяя высоту ширины для html, body, container div, что угодно.

Я не хочу полагаться на javascript, если это возможно. Я также хочу использовать видео 1080p для качественных целей. Масштабирование видео 720p не работает для моих нужд в этом конкретном проекте.

Что мне нужно: отзывчивое фоновое видео, которое охватывает все окно браузера, с использованием видео 1080p, при минимальном размере видео может соответствовать размеру экрана, сохраняя соотношение сторон видео. (Видео должно уменьшаться на меньших экранах)

Answer 1

Это вы что искали?

<style> 
    #video-bg { 
     position: fixed; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     overflow: hidden; 
    } 

    #video-bg > video { 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     object-fit: cover; 
    } 
</style> 

<div id="video-bg"> 
    <video autoplay loop> 
     <source src="Boat_15.mp4" type="video/mp4"> 
     Your browser does not support the video tag. I suggest you upgrade your browser. 
    </video> 
</div> 

Возьмите здесь:

https://fvsch.com/code/video-background/

Это использует объекта-FIT, которая является относительно новым в CSS мире, поэтому будьте осторожны, для совместимости.

Я считаю, что при растяжении видео на фоне такого типа всегда будут возникать незначительные проблемы масштабирования, поскольку окно просмотра скорее всего не будет соответствовать размерам масштабирования видео. Однако я думаю, что это подходящее решение вашей проблемы, так как масштабирует один размер видео по мере необходимости, чтобы покрыть фон без масштабирования вне области просмотра.