Использование и MP4 в качестве фона div и заполнить пространство при изменении размера окна - PullRequest
Новая
       22

Использование и MP4 в качестве фона div и заполнить пространство при изменении размера окна

0 голосов
/ 31 марта 2020

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

HTML

<video playsinline autoplay muted loop poster="images/user_item.mp4" class="w-100" style="">
    <source src="images/user_item.mp4" type="video/mp4">
</video>

CSS

video { 
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 300px;
    border-radius: 5px 0 0 5px;
}

Можно ли воспроизвести видео на холсте, изменить его размер и заполнить все предоставленное пространство?

1 Ответ

1 голос
/ 01 апреля 2020

Нет необходимости в холсте, просто используйте CSS. В частности, здесь вам нужно свойство object-fit.

По умолчанию для видео установлено значение contains, что означает, что размер носителя будет установлен наименьшей стороной и добавлены границы. до наибольшего, сохраняя соотношение сторон мультимедиа.

Из вашего описания совершенно неясно, хотите ли вы cover, который сохраняет соотношение сторон, но сокращает носители, 

video { 
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    object-fit: cover;
}
<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>

или fill, который просто растягивает / сжимает носитель. 

video { 
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    object-fit: fill;
}
<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>

И для будущих читателей обратите внимание, что это свойство CSS также может быть установлено в .

...